Question

我使用Angular 5并且弹出符号的标题依赖于布尔值。如果属性isEditing为true，则标题应为“edit user”。否则标题应为“添加用户”。

它的语法如何？

<dxo-popup title="edit user" .../>

我搜索的内容如下：

感谢您的帮助！弗兰克

Answer 1

其他解决方案要求您更改HTML，或向Typescript添加不必要的代码。

这是一个三元：

<dxo-popup [title]="isEditing ? 'Edit user' : 'Add user'" .../>

Answer 2

你可以做到

<ng-container *ngIf="isEditing;then edit else add"></ng-container>

<ng-template #edit>edit user</ng-template>
<ng-template #add>add user</ng-template>

Answer 3

另一种解决方案是使用组件中的函数来返回文本。

组件：

  isEditing = true;
  popupTitle(){
    return (this.isEditing ? "Edit User" : "Add User");
  }

HTML：

<dxo-popup title="{{popupTitle()}}" .../>

Answer 4

我喜欢从模板中取出功能并将其移动到组件中：

组件：

isEditing = true;

get title() {
  return this.isEditing ? 'edit user' : 'add user';
}

HTML模板：

<dxo-popup title="{{ title }}" .../>

Answer 5

我正在搜索此问题，并找到了答案的简单版本，我希望在此处添加它作为有用的参考。

<button title=" {{ condition ? 'Some TRUE text' : 'Some FALSE text'}}"> Test Button </button>

用* ngIf else设置标题

5 个答案: