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

Question

Here I'm trying to to use *ngFor="let i of dataL;let k = index | async", now what I'm trying to achieve is in the following code.

<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>

Changed from this <a href='(i.links.article)'>Article_{{k+1}}</a> to this
<a href="{{i.links.article}}">Article_{{k+1}}</a> still it shows.
Angular Error

Update 1:
It shows result and I've fixed its position.

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

Now I only require Article : N/A or with URL

Answer 1

You have your async pipe being applied in the wrong place. The async pipe is for subscribing to observables (your data) not the index position as you loop through the array.

Edit: in response to my comment below

<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>