Itérer Tableau d'objet dans Angulaire 4
Je veux interate objet de tableau à l'intérieur de la abonnez-vous
test.fichier ts
export class AppComponent implements OnInit {
title = 'app works!';
observableBooks: Observable<Book[]>
books: Book[];
newarray: any[];
errorMessage: String;
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.observableBooks = this.bookService.getBooksWithObservable();
this.observableBooks.subscribe(books => {
for (let entry of books) {
//push the value into db
}
let retrivedata: Array<number> = //retrive the db collection again
error => this.errorMessage = <any>error
});
}
}
test.html fichier
<ul *ngFor="let book of retrivedata | async">
<li>{{book.price}}</li>
</ul>
J'ai besoin de parcourir cette "arrayofObj" dans la page HTML, ce qui signifie angulaire du modèle de page
Vous devez vous connecter pour publier un commentaire.
Essayer comme ceci :
Vous devez déclarer une variable de classe pour conserver les informations que vous obtenez à l'intérieur de l'abonnement "livres".
Vous ne pouvez pas utiliser
let retrivedata: Array<number> = //retrive the db collection again
sur votre point de vue. Vous devez déclarer cette variable dans une classe de niveau.Prendre un coup d'oeil:
alors à votre avis:
this
mot clé pour accéder à l'intérieur des fonctionsthis.my_class_variable_example
forEach
comme je l'ai expliqué.this
ajouté à ça.Mise à jour :
Je pense que si nous rendre le code un peu plus propre, il devrait ressembler à proximité de cet :
app.composante.ts :
HTML :
Cannot find name 'arrayofObj'
forEach
pour itérer sur les livres et ensuite accéder àarrayofObj
?arrayofObj
à l'intérieur de lasubscribe
?Si vous souhaitez effectuer une itération d'un tableau, mais vous êtes à l'intérieur de la
subscribe
, et si vous êtes en utilisant forEach, il vous faut ensuite ajouter lethis
paramètre pourforEach
pour accéder à la hors de portée.Exemple:
ERROR TypeError: Cannot read property 'dispose' of null at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._dispose (common.es5.js:2761)
for (let entry of books) { console.log(entry); // 1, "string", false try { users.insert({ username: entry.name }); } catch(error) { // console.log(error); } } console.log(users.get(1)); this.bookArr = db.getCollection('users').data || db.addCollection('users', { unique: ['username'] }).data;
this.books
dans l'ordre puis de l'utiliser dans l'INTERFACE utilisateur du modèle. confirmer si c'est le cas.