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

我真的是个新手。我发现从一个数组中获取一个项目并在该组件的相关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);

      }

arr:Array

但是在添加第二项之后，项列表如下所示

在这里，所有的项目都被添加到同一行中，我想让每个项目在单独的行中，一行接一行

然后我尝试了下面的代码

           <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>


{{entries[1]}
{{entries[0]}
{{entries[2]}
{{entries[3]}


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

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

不需要迭代
itemrarray
。您可以使用
索引
直接访问元素

删除每行上每个
项目数组的
*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>


{{itemArrays[1]}
{{itemArrays[0]}
{{itemArrays[2]}
{{itemArrays[3]}
无需迭代
itemrarray
。您可以使用
索引
直接访问元素

删除每行上每个
项目数组的
*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>


{{itemArrays[1]}
{{itemArrays[0]}
{{itemArrays[2]}
{{itemArrays[3]}
在
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>


{{itemArrays[1]}
{{itemArrays[0]}
{{itemArrays[2]}
{{itemArrays[3]}
在
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>


{{itemArrays[1]}
{{itemArrays[0]}
{{itemArrays[2]}
{{itemArrays[3]}
您不需要为每个条目使用
*ngFor
，因为您正在使用数组索引，如
条目[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>

结果是

您不需要为每个条目使用
*ngFor
，因为您正在使用数组索引，如
条目[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>

结果是

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

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


{{x[0]}
{{x[1]}

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

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


{{x[0]}
{{x[1]}

像wise一样
您面临的问题/错误是什么？抱歉，我更新了这些问题@ShlokNangiaIMO用对象替换内部数组更有意义。特别是因为您试图以与数组不同的顺序呈现元素。您面临的问题/错误是什么？抱歉，我更新了这些问题@ShlokNangiaIMO用对象替换内部数组更有意义。特别是因为您试图以不同于数组的顺序呈现元素。谢谢您的回答，但在我的“arr”数组中，我存储的是“itemArray”，它是存储[itemId、name、expireDate、quantity]的数组，所以如果我没有弄错的话，“arr”就像一个二维数组。所以itemArrays[0]=[itemId，name，expireDate，quantity]，但我只需要itemArrays[0]的itemId谢谢你的回答，但在我的“arr”数组中，我存储的是“itemArray”，它是存储[itemId，name，expireDate，quantity]的数组，所以如果我没有弄错的话，“arr”就像一个2D数组。所以itemArrays[0]=[itemId，name，expireDate，quantity]，但我只需要itemArrays[0]的itemId谢谢你的回答，但在我的“arr”数组中，我存储的是“itemArray”，它是存储[itemId，name，expireDate，quantity]的数组，所以如果我没有弄错的话，“arr”就像一个2D数组。所以itemArrays[0]=[itemId，name，expireDate，quantity]，但我只需要itemArrays[0]的itemId谢谢你的回答，但在我的“arr”数组中，我存储的是“itemArray”，它是存储[itemId，name，expireDate，quantity]的数组，所以如果我没有弄错的话，“arr”就像一个2D数组。所以itemArrays[0]=[itemId，name，expireDate，quantity]，但我只需要itemArrays[0]的itemId谢谢你的回答，但在我的“arr”数组中，我存储的是“itemArray”，它是存储[itemId，name，expireDate，quantity]的数组，所以如果我没有弄错的话，“arr”就像一个2D数组。因此，条目[0]=[itemId，name，expireDate，quantity]，但我只需要条目[0]的itemId否，条目=[itemId，name，expireDate，quantity]（即arr的每个条目）和条目[0]=ItemIDas条目是for loopentries中的每个元素条目是arr数组的一个实例，但我的arr数组有[itemArray1，itemArray2，itemArray3]其中itemArray=[itemId，name，expireDate，quantity]，请查看上面问题中显示的bill-item.component.ts代码检查此项谢谢您的回答，但在我的“arr”数组中，我存储的是“itemArray”，它是存储[itemId，name，expireDate，quantity]的数组，所以如果我没有弄错的话，“arr”类似于二维数组。所以条目[0]=[itemId，name，expireDate，quantity]，但我只需要条目[0]的itemId否，条目=[itemId，name，expireDate，quantity]（即arr的每个条目）和条目[0]=ItemIDas条目是for中的每个元素