角を使用したリスト操作5

Question

私は角5の単純な平均スタックアプリケーションを作成しています。 私のコードはパフォーマンスが良くなく、ベストプラクティスを使用していません。 このコードは製品リストのTypescriptファイルです。私は、コレクション製品のフィールド「ユーザー」がloggedinUserと等しい場所を自分の製品に表示したいだけです。

現在、どのユーザーがログインしているにもかかわらず、すべての自分の製品が表示されています。私はモデルやMongooseでは動作しません。

forループは機能しません。 「this.products」は空であると言われています。 誰かがそれが空で、なぜこの問題を解決できるのかを私に説明することはできますか？

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]); 
        } 
       } 

    } 

Answer 1

にconsole.logとのデータの問題は、そのウルサービスgetInventoy（）関数とどこそれからデータを取得し、これまでにやって、その後がある場合は、これを試してみてください。

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

    for()... 

}); 

すべての製品を取得してIDでフィルタリングする方法をお勧めします。あなたが言わなかったように、 "演奏者"ではありません。ユーザIDが "123"の製品を取得するには、バックエンドで特にクエリを実行する必要があります。

ここで、array.filterは長いループの代わりに適切な使用例であると言われています。 「p」はthis.productsアレイ内の各製品である

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

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