如何在同一个angular组件中通过按钮显示一个列表或另一个列表？

Question

我的html中有两个列表

<div class="list" *ngIf="models !== undefined && models.length">
    <div class="model" *ngFor="let model of menuModels">
        <div class="name">{{model.name}}</div>
    </div>
    <div class="operator" *ngFor="let operator of menuOperators">
        <div class="name">{{operator.name}}</div>
    </div>
</div>

我在同一菜单中创建了两个按钮，根据所选按钮的不同，显示一个或另一个按钮

    <div class="buttons">
        <div class="btn" (click)="showModels()"><p class="initial">M</p></div>
        <div class="btn" (click)="showOperators()"><p class="initial">O</p></div>
    </div>

现在两个列表都显示在同一个组件中.我如何通过按钮来管理一个*ngIf，使一个或另一个根据相应的按钮显示出来？ 或者有什么最好的方法来做？

Answer 1

在你的组件中，取一个布尔实例变量，作为显示列表的开关。

• 现在，当你点击showModels按钮，使其为真，这意味着你将显示出 菜单模型
• 现在，当你点击showOperators按钮时，将其设为false，这意味着你将会显示出 菜单操作者

尽量多使用布尔值，而不是比较字符串。因为布尔值总是有1比特的存储。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'xyz-abc',
  templateUrl: './xyz-abc.html',
  styleUrls: ['./xyz-abc.css']
})
export class XYZComponent implements OnInit {
  isDisplayModel: boolean = true;
  constructor(

  ) {

  }

  ngOnInit() {
  }

  showModels(){
    isDisplayModal = true;
  }
  showOperators(){
    isDisplayModal = false;
  }
}

你的HTML代码会像下面这样

<div class="list" *ngIf="models !== undefined && models.length">
<div class="row" *ngIf="isDisplayModal">
    <div class="model" *ngFor="let model of menuModels">
       <div class="name">{{model.name}}</div>
    </div>
</div>

<div class="row" *ngIf="!isDisplayModal">
    <div class="operator" *ngFor="let operator of menuOperators">
        <div class="name">{{operator.name}}</div>
    </div>
</div>

Answer 2

你需要像这样包装这两个列表。

<!-- First list -->
<div *ngIf="isModel; else myTemplate">
 <div class="list" *ngIf="models !== undefined && models.length">
    <div class="model" *ngFor="let model of menuModels">
        <div class="name">{{model.name}}</div>
    </div>
 </div>
</div>
<!-- Second List -->
<ng-template #myTemplate>
    <div class="operator" *ngFor="let operator of menuOperators">
        <div class="name">{{operator.name}}</div>
    </div>
</ng-template>

现在在你的ts中定义一个boolean isModel: isModel=true并在你点击时切换它。

showModels(){
 this.isModel=true;
}
showOperators(){
this.isModel=false
}