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

Include the full error in your post. NOT as an image – Andrew Allen Jun 03 '21 at 08:34 — Andrew Allen, Jun 03 '21 at 08:34

Sam · Accepted Answer · 2021-06-03T09:07:06.067

2

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>

edited Jun 03 '21 at 09:07

answered Jun 03 '21 at 08:35

Sam

1,736
8
15

Article : {{ i.links.article == null ? "N/A" : Article_1 }} its shows result I've fixed that problem i want only as Article : N/A or with URL – Namco Jun 03 '21 at 08:39
Wrap your "Article_1" in an a tag. `Article : {{ i.links.article == null ? "N/A" : Article_{{k+1}} }}` – Sam Jun 03 '21 at 08:41
Used this Article : {{ i.links.article == null ? "N/A" :
Article_{{k+1}}
}}
still shows Article : {{ i.links.article == null ? "N/A" : Article_1 }} – Namco Jun 03 '21 at 08:47
My requirement is quite simple Article : N/A : Article_1,2,3, etc either it shows N/A or Article_1 so the answer will be Article : N/A or Article : Article_1(with url embedded) – Namco Jun 03 '21 at 08:54
Please look into the logic carefully Article : {{ i.links.article == null ? "N/A" : Article_{{k+1}} }} – Namco Jun 03 '21 at 08:55
Ah okay, sorry didn't read this properly. You cannot inject html tags into interpolation like this (which is why you are seeing the {{}} string. It is being escaped. I would suggest you use *ngIf to conditionally render your display I will modify my answer to show you what i mean. – Sam Jun 03 '21 at 08:58
Thank you that'll be better for me and if possible give a up vote as well because my question was for both the error and the interpolation which is being escaped. – Namco Jun 03 '21 at 09:01
This should work: Article : {{ i.links.article == null ? "N/A" : "
Article_" + k+1 + "
" }}
Using ngIf to render conditionally, or using a function to return the preferred string, would probably be better though. :) – Lars Rødal Jun 03 '21 at 09:37

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

1 Answers1