javascript - Angular 4+. Assign value to variable - Stack Overflow

admin管理员组

文章数量:1410730

Im trying to assign a variable in my html in angular 4+. Is this possible?

What im trying to achieve is to assign a parison to a variable, so i do not have to make always the same in all the cases i have.

Here is an example i want to achieve:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">

     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> some text</span>
 // here more divs
     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> other text</span>
 // more divs...
     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> last text</span>  

</mat-list-item>

So, my question is, is there any way to declare something like?

<div #isExampleType="o.type == 'EXAMPLE_TYPE'" >

And then use it in the *ngIf="isExampleType"...

Im trying to assign a variable in my html in angular 4+. Is this possible?

What im trying to achieve is to assign a parison to a variable, so i do not have to make always the same in all the cases i have.

Here is an example i want to achieve:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">

     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> some text</span>
 // here more divs
     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> other text</span>
 // more divs...
     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> last text</span>  

</mat-list-item>

So, my question is, is there any way to declare something like?

<div #isExampleType="o.type == 'EXAMPLE_TYPE'" >

And then use it in the *ngIf="isExampleType"...

• javascript
• angular
• angular-directive

Share Improve this question Follow edited Jan 30, 2018 at 20:04 jonrsharpe 122k3030 gold badges268268 silver badges476476 bronze badges asked Jan 30, 2018 at 20:02 JpCrowJpCrow 5,07744 gold badges3333 silver badges4747 bronze badges 5

• Yo can do that using .map funciton on the retrieving data's logic. http.get(...).map(o => {o.type == 'EXAMPLE_TYPE';return o;}) – Leonardo Neninger Commented Jan 30, 2018 at 20:09
• @LeonardoNeninger Yes, i know that, but i want to know if i can do it inside de html – JpCrow Commented Jan 30, 2018 at 20:16
• I dont know why you are trying to to that way. I think that another way than can help you is create a directive that receive the "o" variable an you can reference it from your controller as ViewChild – Leonardo Neninger Commented Jan 30, 2018 at 20:24
• Related question (not a full dupe), stackoverflow./questions/38582293/… – Estus Flask Commented Jan 30, 2018 at 21:10
• From the Angular documentation: A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular ponent or directive or a web ponent. – Martin Parenteau Commented Jan 30, 2018 at 21:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This particular case is conveniently solved with ponent method:

<span *ngIf="isExampleType(o)"> some text</span>

Or a pipe:

<span *ngIf="o | exampleType"> some text</span>

Both will have nearly zero performance impact

There is no good built-in way to assign a variable like that. #isExampleType is template variable and doesn't serve this purpose.

The closest thing is let in structural directives, like ngIf:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">
  <ng-container *ngIf="o.type == 'EXAMPLE_TYPE'; let isExampleType">
     <span *ngIf="isExampleType"> some text</span>
     ...
  </ng-container>
</mat-list-item>

However, the side effect is that it provides cloaking behaviour. Since isExampleType is expected to be truthy, o.type == 'EXAMPLE_TYPE' || ' '; let isExampleType trick won't work.

The dirty workaround is to use ngFor instead. It will work as expected but provide unreasonable performance overhead:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">
  <ng-container *ngFor="let isExampleType of [o.type == 'EXAMPLE_TYPE']">
     <span *ngIf="isExampleType"> some text</span>
     ...
  </ng-container>
</mat-list-item>

A good alternative is custom ngVar structural directive, like explained here.

You can try something like:

<input #myHiddenValue type="hidden" value="ASDFG">

<div *ngIf="myHiddenValue.value==='ASDFG'">{{ myHiddenValue.value }}</div>

本文标签： javascriptAngular 4 Assign value to variableStack Overflow