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

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 中的视图

Printing only the first returned value to the view in Angular2 App

javascript

string-interpolation

typescript

typescript2.0

angular

结果：

或 ng2