Develop Reference

Console.log prints the cart but can't bind it to the html. ANGULAR

What am I doing wrong?
As you can see the console.log prints the output fine but I can't seem to see it on the webpage.
get-cart.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Cart } from 'src/app/models/cartModel';
import { UsersService } from 'src/app/services/users.service';
#Component({
selector: 'app-get-one-cart',
templateUrl: './get-one-cart.component.html',
styleUrls: ['./get-one-cart.component.css']
})
export class GetOneCartComponent implements OnInit {
cart: Cart;
constructor(
private route: ActivatedRoute,
private userService: UsersService
) { }
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
this.userService.getCartForUser(id)
.subscribe(data => {
this.cart = data;
console.log(this.cart)
});
}
}
get-cart.html
<div class="content-box">
<a routerLink="/users">
<button>Back</button>
</a>
<div *ngIf="cart">
<h2>{{cart._id}}</h2>
<p>{{cart.userId}}</p>
<div *ngFor="let product of cart.products">
<p>{{product.productId}}</p>
<p>{{product.quantity}}</p>
<p>{{product.price}}</p>
</div>
</div>
</div>
console.log and webpage outputs

Got the answer! I just had to set
await Cart.find
to
await Cart.findOne

Why array only brings one object in Angular project?

I'm working with the League of Legends API, more specific with the champion json they bring.
I have this service made with Angular:
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders} from '#angular/common/http';
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
}
#Injectable({
providedIn: 'root'
})
export class ChampionsService {
constructor(private http: HttpClient) { }
getChampions(){
return this.http.get('http://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json');
}
}
This is my .ts file:
import { Component, OnInit } from '#angular/core';
import {ChampionsService } from '../../services/champions.service';
#Component({
selector: 'app-champions',
templateUrl: './champions.component.html',
styleUrls: ['./champions.component.css']
})
export class ChampionsComponent implements OnInit {
public champions;
public arrayChampions;
constructor(private championsService:ChampionsService) { }
ngOnInit(): void {
this.getAllChampions();
}
getAllChampions(){
this.championsService.getChampions().subscribe(
data => { this.champions = data,
this.arrayChampions = Object.entries(this.champions.data).map(([k,v]) => ({ [k]:v })),
this.ArrayIterator();
},
err => {console.error(err)},
() => console.log("Champions cargados")
);
}
ArrayIterator() {
let IteratableArray = Array();
for (let item of Object.keys(this.arrayChampions[0])) {
var eventItem = Object.values(this.arrayChampions[0]);
IteratableArray.push(eventItem);
}
this.arrayChampions = IteratableArray[0];
}
}
And this is the html:
<p>champions works!</p>
{{arrayChampions | json}}
<!-- Cards -->
<div *ngFor="let arrayChampion of arrayChampions" class="card mb-3">
<div class="card-header">
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<a class="text-decoration-none">{{arrayChampion.id}}</a>
</blockquote>
</div>
<div class="card-footer">
</div>
</div>
As you can see, the var "arrayChampions" only brings the first champion (Atrox) when it should bring all the champions as I understand (I'm new at javascript and Angular).

As per your exmaple I have created and stackblitz here, And it made the whole arrayChampions Iterate over its values.
Please find the working stacblitz here
Sample HTML :
<hello name="{{ name }}"></hello>
<!-- {{this.products |json}} -->
<ul>
<li *ngFor="let champ of products | keyvalue">
<label style="font-size: 20px;font-weight: bold;color: red;">
{{champ.key}}
</label>
<ul *ngFor="let item of champ.value | keyvalue">
<li>
{{item.key}} : {{item.value}}
<ul *ngFor="let sub of item.value | keyvalue">
<li>
{{sub.key}} : {{sub.value}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
Sample component.ts :
import { Component } from "#angular/core";
import { HttpClient } from "#angular/common/http";
import { map, catchError, tap } from "rxjs/operators";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
apiURL: string =
"https://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json";
name = "Angular";
products = [];
constructor(private httpClient: HttpClient) {}
ngOnInit() {
this.getChamp();
}
getChamp() {
this.httpClient.get(this.apiURL).subscribe((data: any) => {
this.products = data.data;
Object.keys(data.data).map((key: any, obj: any) => obj[key]);
});
}
}

Question detail page not working in angular

I created all-question component it is visible but when i click on particular question view that redirect to that id but not got details on the id page. here i attached some files,
Admin Service file
Model file
Detail question component file
Detail question ts file
All question component file
All question ts file
admin.service.ts - this is admin service file
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { Observable } from 'rxjs';
import { Admin } from "../model/admin";
#Injectable({
providedIn: 'root'
})
export class AdminService {
private ROOT_URL = "http://localhost:3300/questions";
private httpOptions = {
headers: new HttpHeaders().set("Content-Type", "application/json")
};
constructor(private http: HttpClient) { }
getQuestion(): Observable<Admin[]> {
return this.http.get<Admin[]>(this.ROOT_URL);
}
getQue(id: string){
return this.http.get<Admin>(`${this.ROOT_URL}/${id}`);
}
addQue(admin){
return this.http.post<any>(this.ROOT_URL, admin, this.httpOptions);
}
}
**model=>admin.ts** - this is model file
export interface Admin {
description: String,
// alternatives: String
alternatives: [
{
text: {
type: String,
required: true
},
isCorrect: {
type: Boolean,
required: true,
default: false
}
}
]
}
**que-detail.comp.html** - this is question detail component file
<div class="card">
<div class="card-body">
<h4>Question: {{admin.description}}</h4>
<h4>Options: {{admin.alternatives}}</h4>
</div>
</div>
**que-detail.comp.ts** - this is question details ts file
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Subscription } from 'rxjs';
import { Admin } from '../model/admin';
import { AdminService } from '../service/admin.service';
#Component({
selector: 'app-question-detail',
templateUrl: './question-detail.component.html',
styleUrls: ['./question-detail.component.css']
})
export class QuestionDetailComponent implements OnInit {
id: string;
admin: Admin;
adminSub$: Subscription;
constructor(private adminService: AdminService, private route: ActivatedRoute ) { }
ngOnInit(): void {
this.id = this.route.snapshot.paramMap.get("id");
this.adminSub$ = this.adminService.getQue(this.id).subscribe(admin => {
this.admin = admin;
});
}
}
**all-que.comp.html** - this is all question component file
<div class="card bg-dark text-white my-4 dashboard-bg">
<div class="card-body text-center">
<ul class="questions" *ngIf="admin$ | async as questions">
<li *ngFor="let question of questions">
<h4 class="card-title my-2">{{question.description}}</h4>
<h5 *ngFor="let x of question.alternatives">{{x.text}}</h5>
<a [routerLink]="question._id">View</a>
</li>
</ul>
</div>
</div>
**all-que.comp.ts** - this is all question ts file
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs';
import { Admin } from '../model/admin';
import { AdminService } from '../service/admin.service';
#Component({
selector: 'app-all-question',
templateUrl: './all-question.component.html',
styleUrls: ['./all-question.component.css']
})
export class AllQuestionComponent implements OnInit {
admin$: Observable<Admin[]>;
constructor(private adminService: AdminService) { }
ngOnInit(): void {
this.admin$ = this.adminService.getQuestion()
}
}

Your Question Details Component should be like,
<div class="card">
<div class="card-body">
<h4>Question: {{admin.description}}</h4>
<h5>Options:</h5>
<ng-container *ngFor="alternative of admin.alternatives">
<h6>{{alternative.text}}</h6>
</ng-container>
</div>
You are just using the undefined questions variable ig.

Angular 2 - Load route component and then gets back to previous component

I have a problem with Angular 2 routing. When I click on my link to get the team details, it takes the right route and loads the component specified (TeamComponent). But, immediately "gets back" to the previous component (TeamsComponent), which is the teams list.
This is the structure of my project:
/app
|_shared
|_team
|_team.component.css
|_team.component.html
|_team.component.ts
|_team.model.ts
|_team.service.ts
|_team-list
|_team-list.component.css
|_team-list.component.html
|_team-list.component.ts
|_teams
|_teams.component.css
|_teams.component.html
|_teams.component.ts
|_teams.module.ts
|_teams-routing.module.ts
First, I set the routes on teams-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TeamsComponent } from './teams.component';
import { TeamComponent } from '../shared/team/team.component';
const teamsRoutes: Routes = [
{
path: 'team/:id',
component: TeamComponent
},{
path: 'teams',
component: TeamsComponent
}
];
#NgModule({
imports: [
RouterModule.forChild(teamsRoutes)
]
})
export class TeamsRoutingModule { }
Load the team list from the teamService on teams.component.ts and send it to team-list on teams.component.html:
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { TeamService } from '../shared/team/team.service';
import { Team } from '../shared/team/team.model';
#Component({
selector: 'app-teams',
templateUrl: './teams.component.html',
styleUrls: ['./teams.component.css']
})
export class TeamsComponent implements OnInit {
teamList: Team[] = [];
constructor(private teamService: TeamService) { }
ngOnInit() {
this.teamService.getTeams().subscribe(teams => {
Observable.from(teams).subscribe(team => {
this.teamList.push(team);
});
});
}
}
teams.component.html
<section class="teams">
<app-team-list [teams]="teamList"></app-team-list>
</section>
Then, with my teams list, I set the HTML list on team-list.component.html:
<section *ngFor="let team of teams" class="team_list">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="/assets/logos/{{team.logo}}" alt="Team Logo">
<div class="card-block">
<h4 class="card-title">{{team.name}}</h4>
<p class="card-text">{{team.location}}</p>
<a routerLink="/team/{{team.id}}" class="btn btn-primary">Team Info</a>
</div>
</div>
</section>
Finally, I get the team info from param "id" and the service in team.component.ts:
import { Component, Input, OnInit } from '#angular/core';
import { Router, ActivatedRoute, Params } from '#angular/router';
import { Team } from './team.model';
import { TeamService } from "./team.service";
import 'rxjs/add/operator/switchMap';
#Component({
selector: 'app-team',
templateUrl: './team.component.html',
styleUrls: ['./team.component.css']
})
export class TeamComponent implements OnInit {
team: Team = null;
constructor(private teamService: TeamService,
private activatedRoute: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
let teamId: number = this.activatedRoute.snapshot.params['id'];
console.log("Vamos a buscar el equipo");
this.teamService.getTeamById(teamId).subscribe(team => this.team = team);
}
}
It loads the TeamComponent HTML with the team data, but gets back to /teams direction (and doesn't print the team list). I tried to change the routes names (/detail/:id for example) but still doesn't work. Any suggestions? Thanks in advance.

Ok, got it. Your request will be exuted async, so at the creation-time of your component, team is null. I think you have a binding like this in your TeamComponent:
{{ team.name }}
If team is null, name cannot be accessed and it crashes. To be sure the html will be rendered without errors, use the elvis-operator like this:
{{ team?.name }}
This will only access name if team is not null or undefined

Update: The getTeamById service
getTeamById(id: number): Observable<Team> {
let team: Team = null;
return this.http.get(this.urlTeams+'/'+id)
.map(response => {
let dbTeam: any = response.json();
for(let i in dbTeam) {
team = new Team(dbTeam[i].teamId,dbTeam[i].teamName,dbTeam[i].teamLocation,dbTeam[i].teamFoundation,dbTeam[i].teamDivision,dbTeam[i].teamConference,dbTeam[i].teamStadium,dbTeam[i].teamAttendance,dbTeam[i].teamLogo,dbTeam[i].teamStadiumPhoto);
}
return team;
})
.catch(this.handleError);
}

Template not binding to observable while using async pipe on initial load

I'm using the contentful js SDK to fetch data in a service. The SDK provides a method to retrieve entries from a promise and also parse those entries. Since I would like to use observables, I am returning the promise as an observable and then transforming from there.
In my home component, I am then calling the contentfulService OnInit and unwrapping the observable in the template using the async pipe.
My problem:
When the home component loads, the template is not there even though the service has fetched the data successfully. Now, if I interact with the DOM (click, hover) on the page, the template will instantly appear. Why is this not just loading asynchronously on page load? How can I fix this?
An example .gif showing the behavior.
contentful.service.ts
import { Injectable } from '#angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { Service } from '../models/service.model';
import * as contentful from 'contentful';
#Injectable()
export class ContentfulService {
client: any;
services: Service[];
service: Service;
constructor() {
this.client = contentful.createClient({
space: SPACE_ID,
accessToken: API_KEY
});
}
loadServiceEntries(): Observable<Service[]> {
let contentType = 'service';
let selectParams = 'fields';
return this.getEntriesByContentType(contentType, selectParams)
.take(1)
.map(entries => {
this.services = [];
let parsedEntries = this.parseEntries(entries);
parsedEntries.items.forEach(entry => {
this.service = entry.fields;
this.services.push(this.service);
});
this.sortAlpha(this.services, 'serviceTitle');
return this.services;
})
.publishReplay(1)
.refCount();
}
parseEntries(data) {
return this.client.parseEntries(data);
}
getEntriesByContentType(contentType, selectParam) {
const subject = new Subject();
this.client.getEntries({
'content_type': contentType,
'select': selectParam
})
.then(
data => {
subject.next(data);
subject.complete();
},
err => {
subject.error(err);
subject.complete();
}
);
return subject.asObservable();
}
sortAlpha(objArray: Array<any>, property: string) {
objArray.sort(function (a, b) {
let textA = a[property].toUpperCase();
let textB = b[property].toUpperCase();
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});
}
}
home.component.ts
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs/Rx';
import { ContentfulService } from '../shared/services/contentful.service';
import { Service } from '../shared/models/service.model';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
service: Service;
services: Service[];
services$: Observable<Service[]>;
constructor(
private contentfulService: ContentfulService,
) {
}
ngOnInit() {
this.services$ = this.contentfulService.loadServiceEntries();
this.services$.subscribe(
() => console.log('services loaded'),
console.error
);
};
}
home.component.html
...
<section class="bg-faded">
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 mb-4" *ngFor="let service of services$ | async">
<div class="card card-inverse text-center">
<img class="card-img-top img-fluid" [src]="service?.serviceImage?.fields?.file?.url | safeUrl">
<div class="card-block">
<h4 class="card-title">{{service?.serviceTitle}}</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-brand-black"><i class="fa fa-wrench mr-2" aria-hidden="true"></i>Cras justo odio</li>
<li class="list-group-item bg-brand-black"><i class="fa fa-wrench mr-2" aria-hidden="true"></i>Dapibus ac facilisis in</li>
<li class="list-group-item bg-brand-black"><i class="fa fa-wrench mr-2" aria-hidden="true"></i>Vestibulum at eros</li>
</ul>
</div>
<div class="card-footer">
Learn More
</div>
</div>
</div>
</div>
</div>
</div>
</section>
...

It sounds like the Contentful promise is resolving outside of Angular's zone.
You can ensure the the observable's methods are run inside the zone by injecting NgZone into your service:
import { NgZone } from '#angular/core';
constructor(private zone: NgZone) {
this.client = contentful.createClient({
space: SPACE_ID,
accessToken: API_KEY
});
}
And by calling using the injected zone's run when calling the subject's methods:
getEntriesByContentType(contentType, selectParam) {
const subject = new Subject();
this.client.getEntries({
'content_type': contentType,
'select': selectParam
})
.then(
data => {
this.zone.run(() => {
subject.next(data);
subject.complete();
});
},
err => {
this.zone.run(() => {
subject.error(err);
subject.complete();
});
}
);
return subject.asObservable();
}