在下面的代码片段中，我为 3 个不同的属性呼叫了名为 isSiteAlreadyAdded(site.id) 的相同函式。有什么方法可以存盘特定选项标签的值并将其用于给定的选项属性？

<div class="template-form-input-container">
          <select style="width: 100%;" id="sites" [(ngModel)]="site" name="sites" #sites="ngModel" required>
            <option [ngValue]="null" selected>Select Site</option>
            <option *ngFor="let site of sitesToAdd" [ngValue]="site" data-toggle="tooltip" data-placement="top" title="{{isSiteAlreadyAdded(site.id) ? 'Site is already added.':''}}" [ngClass]="{'alert alert-secondary': isSiteAlreadyAdded(site.id)}" [disabled] = "isSiteAlreadyAdded(site.id)">{{site.name}}</option>
          </select>
      </div>

uj5u.com热心网友回复：

正如@dan vid 的链接帖子中所述，模板中的函式呼叫是一种不好的做法，因为它们将在每次更改检测滴答时执行。

因此，您可以使用管道，也可以预先计算相应的值。

管道

如果您使用的是管你还算值多次，但只有当的管道变化的输入值，它通过减少重新计算的次数不少相比，在模板函式呼叫。

一个基本的管道看起来像这样：

@Pipe({ name: 'isAlreadyActive' })
export class IsAlreadyActivePipe implements PipeTransform {

  transform(id: string): boolean { // <- or any other return type instead of boolean
    // Implement your check and return the result
  }

}

您的情况下的电话如下所示：

<option  
  ...
  title="{{ site.id | isAlreadyActive ? 'Site is already added.': '' }}" 
  ...
  >
  {{site.name}}
</option>

您将在此处找到有关管道的更多信息。

将条件结果存盘在变量中

还可以将管道回传值存盘在变量中（请参阅此处）。

这看起来像这样：

<ng-container *ngIf="site.id | isAlreadyActive as isActive">
  <option  
    ...
    title="{{ isActive ? 'Site is already added.': '' }}" 
    ...
  >
  {{site.name}}
  </option>
</ng-container>

在此示例中，我们已将结果存盘在其中，isActive并且您的计算只会执行一次，但只要回传值是falsy的内容*ngIf就不会显示。

例如，在您的情况下，您可以回传而不是简单的布林值和包含布林值的物件，例如， { isActive: returnValue }。这样你的回传值就会是truthy，内容会被显示。

预计算

另一种选择是预先计算组件中的值并将该值分配给site.isActive作为示例。这样你就只有一个计算，这也比从模板呼叫函式要好。