Question

我有一个对象数组。屏幕上有两个桌子。我想在顶部表格中显示n-1个元素，并在底部列中显示最后一个元素。

HTML顶部表格：


<th>name</th>
<th>age</th>
<tr *ngFor="let key of array">
<td> {{key.name}}</td>
<td> {{key.age}}</td>

HTML bottom table:
<th></th>
<th>age</th>
<tr *ngFor="let key of array">
<td></td>
<td> {{key.age}}</td>

假设有5个元素，则应该在顶部显示4个元素，在底部显示最后一个元素。在api响应中，我得到的是对象的单个数组，最后一个对象应始终在底部表格中。另外，最后一个表没有名称列。它返回一个字符串“最终名称”。是否可以使用它来检测是否name === Final Name然后将其从数组中删除并在其他地方显示？它的for循环条件应该是什么？我应该从数组中切出最后一个元素并将其存储在.ts文件的temp数组中吗？

Answer 1

您可以创建一个变量，以将最后一个数组对象存储在ts文件中，然后将数组弹出到该变量。例如：

component.ts：

export class YourComponent {
lastItem: YourType;

...

lastItem = myArray.pop();

这将删除最后一项并将其分配给lastItem变量，该变量可用于填充您的底表。

HTML底部表格：

<th></th>
<th>age</th>
<tr>
<td></td>
<td> {{lastItem.age}}</td>

Answer 2

首先请这样使用* ngFor

* ngFor =“让项目中的项目；让i =索引”

您可以应用类似条件

* ngIf =“ i！= array.length”

通过使用索引，您可以分别打印那些最后的数组元素

删除最后一个数组元素并返回数组，还分别返回删除的元素

2 个答案: