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> 仍然显示。
Angular Error

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

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

现在我只需要文章：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>

Angular 12 花括号内大括号文本插值带条件运算符表达式

Angular 12 curly braces within braces text interpolation with conditional operator expression

angular

typescript

angular12