2017-12-06 11 views
0

Ich mache eine einfache Mean-Stack-App mit Angular 5. Ich weiß, dass mein Code nicht so performant ist und keine Best Practices verwendet. Dieser Code ist meine Typescript-Datei für eine Produktliste. Ich möchte nur, dass meine Produkte anzeigen, wo das Feld "Benutzer" in den Sammlungsprodukten dem eingeloggten Benutzer entspricht.Listenoperationen mit Angular 5

Im Moment zeigt es alle meine Produkte an, egal welcher Benutzer angemeldet ist. Ich arbeite nicht mit Modellen oder Mongoose.

Die for-Schleife funktioniert nicht. Es heißt, dass "this.products" leer ist. Kann mir jemand erklären, warum es leer ist und wie ich dieses Problem lösen kann?

import { Component, OnInit } from '@angular/core'; 

// Import the DataService 
import { DataService } from '../../data.service'; 
import { UserService } from '../../user.service'; 

@Component({ 
    selector: 'app-product-list', 
    templateUrl: './product-list.component.html', 
    styleUrls: ['./product-list.component.css'] 
}) 
export class ProductListComponent implements OnInit { 
    products: Array<any>; 
    productsCU : Array<any>; 
    ngOnInit() { 
    } 

    constructor(private _dataService: DataService , private userService: UserService) { 
     this._dataService.getInventory() 
     .subscribe(res => this.products = res); 


     for(var i = 0;i < this.products.length;i++){ 
        if(this.products[i].user== userService.getNameUserLoggedIn()){ 
         this.productsCU.push(this.products[i]); 
        } 
       } 

    } 
+0

haben Sie die Produkte Konsole einzuloggen, was yyour Vorlage Ihr Titel saugt sieht aus wie –

+0

Art für jemanden, der versucht zu Hilfe, bitte schreibe es für ein bestimmtes Problem um. – KHAN

+0

wie sollten Sie es nennen? –

Antwort

1

die Sie interessieren, wenn es ein Problem mit dem Datum console.log ist sie dann aus mit ur Diensten getInventoy() Funktion und wo immer das bekommt die Daten zu tun.

this._dataService.getInventory().subscribe((res) => { 
    this.products = res; 
    console.log(this.products); 

    for()... 

}); 

Ich empfehle nicht die Vorgehensweise, die Sie hier tun, um ALLE Produkte dann nach ID zu filtern. Wie Sie erwähnt haben, ist es nicht "performant". Sie sollten das speziell in Ihrem Backend abfragen, um Produkte mit der Benutzer-ID "123" zu erhalten.

Nachdem gesagt, dass ein Array.Filter hier statt einer langatmigen for-Schleife geeignet Anwendungsfall scheint.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

let userProducts = this.products.filter(p => p.user == userService.getNameUserLoggedIn()) 

wobei „p“ ist jedes Produkt innerhalb this.products Array

+0

Oh danke, jetzt kann er nicht lesen die .push, Methode –

+0

wahrscheinlich falsche Verwendung von, wie ein Objekt in einem Array –

+0

Nur stellen Sie sicher, dass Ihre This.Products [i] ein Objekt ist. Sollte in Ordnung sein – KHAN