用 *ngIf else 设置标题答案

【问题标题】：set title with *ngIf else用 *ngIf else 设置标题
【发布时间】：2018-05-15 09:22:40
【问题描述】：

我使用 Angular 5，弹出窗口的标题依赖于布尔值。当属性 isEditing 为 true 时，标题应为“编辑用户”。否则标题应为“添加用户”。

它的语法是怎样的？

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

我搜索以下内容：

感谢您的帮助！弗兰克

【问题讨论】：

我搜索类似：

标签： angular angular-ng-if

【解决方案1】：

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

这是一个三元：

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

【讨论】：

我不会考虑在组件中添加不必要的代码，这表明这是一件坏事。有些人甚至可能称之为干净的代码，其中比*ngIf="isEditing" 更复杂的逻辑被委托给组件。
据我所见，风格指南提出了相反的建议：angular.io/guide/…（注意那里的逻辑也很简单）
好吧，我并不是说你的答案是错误的。我只是指出，这个问题的其他答案 a) 不一定添加不必要的代码，并且 b) 对其他人来说可能是被认为是干净的代码。
回到风格指南：仅仅因为你能做某事并不一定意味着你应该去做。总结：目前的答案没有对错之分，只是风格问题。
我正在删除我不必要的 cmets 来回答你，并以此结束：这个解决方案是 OP 要求的，其他的不是。

【解决方案2】：

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

组件：

isEditing = true;

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

HTML 模板：

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

【讨论】：

【解决方案3】：

你可以的

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

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

【讨论】：

他可以使用代替
，这样不会生成另一个渲染的html-tag

【解决方案4】：

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

组件：

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

HTML：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：