angular - 带有条件运算符表达式的大括号文本插值中的 Angular 12 花括号

Question

在这里我尝试使用*ngFor="let i of dataL;let k = index | async"，现在我想要实现的是以下代码。

<tr *ngFor="let i of dataL;let k = index | async">
    <td>{{ i.id }}</td>
    <td>{{ i.details }}</td>
    <td>
      Article : {{ i.links.article == null ? "N/A" : <a href='(i.links.article)'>Article_{{k+1}}</a> }}<br>
      Reddit : {{ i.links.reddit == null ? "N/A" : <a href='(i.links.reddit)'>reddit_{{k+1}}</a> }}<br>
      Wikipedia : {{ i.links.wikipedia == null ? "N/A" : <a href='(i.links.wikipedia)'>wikipedia_{{k+1}}</a> }}<br>
    </td>
  </tr>

从这个改变<a href='(i.links.article)'>Article_{{k+1}}</a>到这个
<a href="{{i.links.article}}">Article_{{k+1}}</a>仍然显示。
角度误差

更新 1：
它显示了结果，我已经固定了它的位置。

Article : {{ i.links.article == null ? "N/A" : Article_1 }}

现在我只需要 Article : N/A 或带有 URL

Answer 1

您将异步管道应用在错误的位置。异步管道用于在遍历数组时订阅可观察对象（您的数据）而不是索引位置。

编辑：回应我下面的评论

<tr *ngFor="let i of dataL | async; let k = index">
    <td>{{ i.id }}</td>
    <td>{{ i.details }}</td>
    <td>      
      Article: 
      <ng-container 
      *ngIf="i.links.article == null">N/A</ng-container>
      <ng-container *ngIf="i.links.article != null">
         <a href="{{i.links.article}}">Article_{{k+1}}</a>
      </ng-container>
    </td>
</tr>