Angular 将现有对象添加到数组并在视图上显示（双向绑定）

我正试图在食谱中添加一个元素，以下是我尝试过的

标记：

   <div class="container " *ngFor="let rec of UI_Recipes" [class.active]="rec === selectedRecipe">


          <div *ngFor="let iu of rec.ingridientUnits; let i = index;">
            <p>{{iu.ingridientID}}</p>
            <p>{{iu.unitID}}</p>
            <p>{{iu.amount}}</p>
          </div>

          <!--[disabled]="!new_unit_input"-->
          <button type="button" class="btn btn-primary" (click)="onIngridientUnitAdd(rec.id)">Add Row</button>

我得到了什么

=>在视图上，我只得到“0”，而不是整个对象

我该怎么做（也许是一种更具角度的方式），你还需要什么吗

---

使用angular 8

您的输出看起来如何？那么，

UI\u recipes

是如何构造的呢？我创建了一个示例。它很好用。到底是什么问题？在你的例子中，当添加一个元素时，我没有得到任何零。对于您的另一个问题，您可以尝试将配方传递给您的

oningridientutadd

方法，而不仅仅是id，而不是直接添加到ingridients。不确定数组中的值是否更改为。

onIngridientUnitAdd(recId) {
    let a = new IngridientUnit();
    a.ingridientId = 'e';

    console.log(a);

    this.UI_Recipes.filter(x => x.id === recId)[0].ingridientUnits.push(a);
    // Is there a better (angular) way, to add an Object ?!

}