Angular 2 *ngFor 嵌套循環

Question

我有兩個類：Produkt 和 Werbedaten。 werbedaten 類有一個 produckt 數組。

我想使用 *ngFor 公開一個具有 Produkts 數組的 werbedaten 數組

export class Produkt {
    public artikelNummer: number;
    public hauptabbildung: string;
}

export class WD {
    public nummer: number;
    public name: string;
    public produkts: Produkt[];
}

export class AppComponent {
   produkts1: Produkt[] = [
   new Produkt(1, ''),
   new Produkt(2, ''),
   new Produkt(3, '')
 ];
 werbedaten: WD[] = [
   new WD(1, 'Muesli', this.produkts1)
 ];
 }

<div *ngFor="let werbe of werbedaten">
    {{werbe.nummer}} {{werbe.name}}
    <p *ngFor="let produkt of werbe.produkts">
        {{produkt.artikelNummer}}
    </p>
</div>

當我執行此代碼時，它顯示錯誤。

任何人都可以幫助我嗎？

Answer 1

我主要是猜測你的問題是什么，因為你沒有提到你遇到了什么錯誤。

我通過向 Produkt 和 WD 類添加構造函數來使您的示例工作

例如

export class Produkt {
    public artikelNummer: number;
    public hauptabbildung: string;

    constructor(aArtikelNummer: number, aHauptabbildung: string){
        this.artikelNummer = aArtikelNummer;
        this.hauptabbildung = aHauptabbildung;
    }
}

在您的示例中，如果沒有構造函數，編譯器會吐出以下錯誤：

提供的參數與調用目標的任何簽名都不匹配。

這是有道理的，因為沒有構造函數，我們還沒有告訴編譯器如何用參數實例化一個新的 Product。

另一種解決方案

如果您不想為您的類定義構造函數，您還可以在應用程序組件中定義 produkts1 屬性，如下所示：

produkts1: Produkt[] = [
    {artikelNummer:1, hauptabbildung:''},
    {artikelNummer:2, hauptabbildung:''},
];