Question

在我的Angular 2应用程序中，我使用字符串插值来打印视图中的一些数据。我使用*ngFor迭代一个对象数组，在每个对象中查找某个值，如果找到，则将该值打印到屏幕上。这是按预期工作的。

但是，有时会返回多个值 - 当检查的三个对象中有多个对象具有该特定属性的值时。这会抛弃布局。在这些情况下，我想知道是否有一种方法可以添加一些逻辑（具体到视图），以便只打印出找到的第一个值。

这就是我所拥有的：

        <ng-container *ngFor="let status of record.status">
            <td *ngIf="status?.level === currentLevel &&
                        status?.step">
                {{status?.step}}
            </td>
            <td *ngIf="status?.level !== currentLevel ||
                        !status?.step">
                {{'N/A'}}
            </td>
        </ng-container>

我可以添加到此视图代码中以完成处理此逻辑吗？

Answer 1

您可以获得第一个元素，如下所示

<ng-container *ngFor="let status of status;  #first=first">

并根据需要使用它。

结果：

<ng-container *ngFor="let status of record.status; #first = first">
      <div *ngIf="first">
         <td *ngIf="status?.level === currentLevel && status?.step">
                        {{status?.step}}
          </td>
          <td *ngIf="status?.level !== currentLevel || !status?.step">
                        {{'N/A'}}
          </td>
      </div>

    </ng-container>

或者ng2

<ng-container *ngFor="let status of record.status;  let i = index">
      <div *ngIf="i ===0">
         <td *ngIf="status?.level === currentLevel && status?.step">
                        {{status?.step}}
          </td>
          <td *ngIf="status?.level !== currentLevel || !status?.step">
                        {{'N/A'}}
          </td>
      </div>

    </ng-container>

仅将第一个返回值打印到Angular2 App中的视图

1 个答案:

结果：

或者ng2