Question

我有HTML

<mat-card *ngFor="let shift of employer.shifts">

<mat-card-content>

    <div *ngIf="getShiftLocation(shift);">

        <div>{{ getShiftLocation(shift)['title'] }}</div>
        <div>{{ getShiftLocation(shift)['phone'] }}</div>
        <div>{{ getShiftLocation(shift)['manager'] }}</div>                         

    </div>

</mat-card-content>

有getShiftLocation（shift）函数，它返回Location对象的字段值

问题是：有什么方法可以在HTML中设置整个Location对象，以便我可以使用它？

例如：

<pre>

   <div #location="getShiftLocation(shift)">
       <div>{{location.title}}</div>
   </div>

</pre>

也许也可以。

Answer 1

一种解决方案是将结果保存到模板变量中，使用ngIf指令的语法糖，它将看起来像这样：

<mat-card *ngFor="let shift of employer.shifts">

  <mat-card-content>
    <div *ngIf="getShiftLocation(shift) as shiftLocation">
      <div>{{ shiftLocation.title }}</div>
      <div>{{ shiftLocation.phone }}</div>
      <div>{{ shiftLocation.manager }}</div>                         
    </div>
  </mat-card-content>
</mat-card>

但是请记住，该方法最终将在每个更改检测圈子中被调用，因此不要在其中执行复杂的计算或占用大量CPU的任务。

注意：另外，您还应该使用trackBy指令的ngForOf功能，以便更好地控制angular应该何时重用DOM元素。

Answer 2

您可以将函数内部的整个位置设置为变量，然后在HTML中使用该变量。

将变量声明为

location : LocationType = {};

和 getShiftLocation

getShiftLocation(){
  this.location  = // assin the value
}

并在HTML中用作

<div>{{location.title}}</div>

请记住，在 function 中使用 template 是一种不好的做法，会对性能产生一些影响。

Answer 3

您可以将位置添加到班次类别：

<div *ngIf="shift.location">
    <div>{{ shift.location['title'] }}</div>
    <div>{{ shift.location['phone'] }}</div>
    <div>{{ shift.location['manager'] }}</div>                     

</div>

因此您可以按以下方式访问它：

ii = to_im(i)

Angular-将变量传递给HTML

3 个答案: