Angular中如何使用*ngIf配合布尔变量切换Stock页面的标题

你已经在搜索触发方法里定义了searched布尔变量，只需要两步就可以实现标题切换：

步骤1：给布尔变量设置初始值 #

在ngOnInit方法中新增searched的初始值赋值，避免初始状态变量未定义导致显示异常：

ngOnInit() {
    this.currentPortfolio = this.shrd.getData('currentPortfolio');
    this.subPage = 'stocks';
    this.sectionTitle = "";
    this.pageTitle = "Options";
    this.searched = false; // 新增初始未搜索状态赋值
    for (var i = 0; i < this.optionsDropdownFilters.length; i++) {
        this.issuers.actionsGrouped[this.optionsDropdownFilters[i]] = [];
    }

    console.log("First page => Tile 1 : " + JSON.stringify(this.subPage = 'stocks'));
    this.initiate();
}

步骤2：修改HTML模板动态渲染标题 #

如果仅需要切换标题文本，用三元表达式写法更简洁：

<ng-container *ngIf="subPage  === 'stocks' ">
   <div class="breadcrumb d-flex justify-content-between">
      <h1>{{ searched ? 'Title 2' : 'Title 1' }}</h1>
   </div>
</ng-container>

如果需要同时切换和标题相关的其他内容，可以用*ngIf else写法：

<ng-container *ngIf="subPage  === 'stocks' ">
   <div class="breadcrumb d-flex justify-content-between">
      <h1 *ngIf="!searched; else title2Block">Title 1</h1>
      <ng-template #title2Block>
        <h1>Title 2</h1>
        <!-- 此处可新增Title2对应的其他元素 -->
      </ng-template>
   </div>
</ng-container>

实现逻辑：初始状态searched为false，页面显示Title 1；点击搜索按钮触发launchSearchSelected方法后，searched被赋值为true，页面自动切换为Title 2。

内容的提问来源于stack exchange，提问作者user16617296