Angular - 如何在插值中编写条件？答案

【问题标题】：Angular - How can I write a condition in interpolation?Angular - 如何在插值中编写条件？
【发布时间】：2017-11-23 13:51:52
【问题描述】：

我有一个通过add client 表单填充的表。它工作正常并显示更改。问题是我有一个选择列表，用户在其中选择特定的源，然后将其保存在 ngmodel 中。这是代码。

选择列表

 <mat-select [(ngModel)]="model.source" name="source" placeholder="Select Source ">
      <mat-option [value]="1 ">Upwork</mat-option>
      <mat-option [value]="2 ">Refer from Friend</mat-option>
      <mat-option [value]="3 ">Other</mat-option>
    </mat-select>

现在在我的表格中，根据选择显示的值是 1 或 2 或 3。我想写点东西，像这样的插值条件。

表格字段

<ng-container matColumnDef="source">
  <mat-header-cell *matHeaderCellDef> Source </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.source ? if value is 1 : display (upwork), if value is 2 : display(refer from friend)}} </mat-cell>
</ng-container>

类似这样的东西，我确实喜欢 angularjs 我不确定 Angular

【问题讨论】：

您是否查看过模板语法文档中的示例？例如。 angular.io/guide/template-syntax#style-binding 显示一个三元条件表达式，或者您可以使用 ngSwitch 替换整个元素。
@jonrsharpe man 我在这里看不到插值，它只是属性绑定
整个模板的语法是一致的。但是，对于任何重要的事情，最好在类中编写逻辑并在模板中插入生成的 value 。否则模板会变得非常难以阅读。

标签： angular angular-material angular2-ngmodel

【解决方案1】：

你可以使用嵌套的三元 if

{{element.source == 1 ? 'upwork' : (element.source == 2 ? 'refer from friend' : '')}}

或许更好

export class MyComponent {
  sourceNames = {1: 'upwork', 2: 'refer from friend', 3: 'other' };
}

{{sourceNames[element.source]}}

【讨论】：

模板解析错误：解析器错误：意外标记：在 [{{element.source === 1 中的第 24 列？ : 'upwork' : (element.source === 2 ? '来自朋友' : '')}} ] in ng:///AppModule/ClientsComponent.html@53:42 ("header-cell *matHeaderCellDef> Source eader-cell> [ERROR ->]{{element.source === 1 ? : 'upwork' : (element.source === 2 ? '来自朋友' : '')}} "): ng:///AppModule/ClientsComponent.html@53:42
请更新您的问题并添加导致错误消息和错误消息的代码。 cmets 中的代码不可读。
有一个多余的:。我在回答中删除了它。
第三个条件呢，会是这样吗？ {{element.source === 1 ？ 'upwork' : (element.source === 2 ? '来自朋友的推荐' : ' ' : (element.source === 3 ? 'other' : ' ' ) } }
似乎即使使用[value]="1" angular 也会将string 设置为模型stackblitz.com/edit/angular-f212bc?file=app%2Fapp.component.ts