Question

我试图在我的html中以角度4+分配一个变量。这可能吗？

我想要实现的是为变量分配比较，所以在我拥有的所有情况下，我不必总是相同。

这是我想要实现的一个例子：

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

所以，我的问题是，有没有办法宣布类似的东西？

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

然后在* ngIf =“isExampleType”...

中使用它

Answer 1

这种特殊情况可以通过组件方法方便地解决：

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

或管道：

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

两者的性能影响几乎为零

没有好的内置方法来分配这样的变量。 #isExampleType是模板变量，并不能达到此目的。

结构指令中最接近的是let，例如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>

然而，副作用是它提供了隐形行为。由于isExampleType预计会变得真实，o.type == 'EXAMPLE_TYPE' || ' '; let isExampleType技巧不会起作用。

肮脏的解决方法是使用ngFor代替。它将按预期工作，但提供不合理的性能开销：

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

一个很好的选择是自定义ngVar结构指令，如解释here。

Answer 2

您可以尝试以下内容：

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

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

Angular 4+。为变量赋值

2 个答案: