首页 文章

Angular 2 * ngFor嵌套循环

提问于
浏览
-1

我有两个班: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>

我在执行此代码时显示错误 .

谁能帮我?

1 回答

  • 0

    我大多猜测你的问题是什么,因为你没有提到你得到的错误 .

    我通过向类Produkt和WD添加构造函数来实现工作

    For example

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

    在您的示例中,如果没有构造函数,编译器会发出以下错误:

    提供的参数与呼叫目标的任何签名都不匹配 .

    这是有道理的,因为没有构造函数我们没有告诉编译器如何使用参数实例化新的Product .

    Another Solution

    如果您不想为您的类定义构造函数,您还可以在应用程序组件中定义produkts1属性,如下所示:

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

相关问题