Angular 使用*ngIf-else设置标题

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

它的语法如何

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

我搜索一些东西，比如：

谢谢你的帮助！ 弗兰克，你能行

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

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

编辑用户
添加用户

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

组成部分：

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

isEditing = true;

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

HTML:

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

---

其他解决方案要求您要么更改HTML，要么向打字脚本中添加不必要的代码

这是一个三元：

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

---

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

组成部分：

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

isEditing = true;

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

HTML模板：

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

---

我搜索了这个问题，找到了答案的简单版本，我希望在这里添加它作为一个有用的参考

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

测试按钮
< /代码>我搜索一些东西：像他不能使用的那样，这不会生成另一个渲染的HTML标签，也不会考虑给组件添加不必要的代码，这表明这是一件坏事。有些人甚至会称之为干净的代码，将比
*ngIf=“isEditing”
更复杂的逻辑委托给组件。就我所见，styleguide提出了相反的建议：（注意那里的逻辑也很简单）好吧，我不认为您的答案是错的。我只是指出，这个问题的其他答案不一定是a）添加了不必要的代码，b）对于其他人来说可能是一个干净的代码。回到样式指南：仅仅因为你能做某事并不一定意味着你应该做。总结：目前的答案没有对错，只是风格问题。我删除我不必要的评论来回答你，并总结如下：这个解决方案是OP要求的，其他的不是。