如何以角度从数组中输出项目

Question

我对 Angular 真的很陌生。而且我发现很难从数组中获取一个项目并在该组件的相关 html 文件中输出。 下面的代码展示了bill-item.component.ts文件

的onClick函数

arr: Array<any> =[];
itemArray: Array<any> =[]; 

     onAddToBill(itemId:string, name:string , expireDate:string , quantity:string){

      this.itemArray.push([itemId,name,expireDate,quantity]);
      this.arr.push(this.itemArray);
      console.log(this.arr);

      }

我需要在我的 bill-item.component.html 上输出项目数组，如下所示

                 <tbody>

                  <tr *ngFor="let itemArrays of arr">

                    <td *ngFor="let obj of itemArrays">{{obj[1]}}</td>
                    <td *ngFor="let obj of itemArrays">{{obj[0]}}</td>
                    <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                    <td *ngFor="let obj of itemArrays">{{obj[2]}}</td>
                    <td *ngFor="let obj of itemArrays">{{obj[3]}}</td>

                  </tr>

                </tbody>

下图显示了我添加第一个项目时的项目列表

但添加第二个项目后，项目列表显示如下

这里所有的项目都加到同一行，我想把每个项目放在单独的行中，一行接一行。

然后我尝试了下面的代码

           <tbody>
              <tr *ngFor="let entries of arr">
                <td>{{entries [1]}}</td>
                <td>{{entries [0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{entries [2]}}</td>
                <td>{{entries [3]}}</td>
              </tr>
            </tbody>

这就是结果。由于 ID 具有条目 [0]，因此它填充了该数组中的所有实例。

下图显示了添加 3 项后我的 console.log(arr) 结果

Answer 1

您可以轻松地从“itemArray”中获取值，而不是使用“arr”并获取项目详细信息并在表格中打印。

<table>
      <tr *ngFor="let x of itemArray">
          <td>{{x[0]}}</td>
          <td>{{x[1]}}</td>
      </tr>
</table>

同样明智

Answer 2

您不需要为每个条目使用*ngFor，因为您使用的是entries[1]等数组索引

            <tbody>
              <tr *ngFor="let entries of arr">
                <td>{{entries [1]}}</td>
                <td>{{entries [0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{entries [2]}}</td>
                <td>{{entries [3]}}</td>
              </tr>
            </tbody>

我用arr以下值尝试了上面的代码

arr = [['a','b','c','d'],['a1','b1','c1','d1']]

得到的结果为

Answer 3

无需迭代itemArrays。您可以使用index 直接访问元素。

删除每行上每个itemArrays 的*ngFor。

<tbody>

              <tr *ngFor="let itemArrays of arr">
                <td>{{itemArrays[1]}}</td>
                <td >{{itemArrays[0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td >{{itemArrays[2]}}</td>
                <td>{{itemArrays[3]}}</td>

              </tr>

            </tbody>

Answer 4

在td 中，您已经在访问数组中的项目，因此您不需要使用 *ngFor。

            <tbody>
              <tr *ngFor="let itemArrays of arr">
                <td>{{itemArrays[1]}}</td>
                <td>{{itemArrays[0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{itemArrays[2]}}</td>
                <td>{{itemArrays[3]}}</td>
              </tr>
            </tbody>