如何通过按钮在同一个 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

In your component take a boolean instance variable that will act as a toggle for displaying your lists

现在，当您点击 showModels 按钮时使其变为真，这意味着您将显示 menuModels
现在当您点击 showOperators 按钮时将其设置为 false，这意味着您将显示 menuOperators

尽可能多地使用布尔值，而不是比较字符串。作为。布尔值将始终有 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;
  }
}

Your HTML code will look like below

<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 中定义一个布尔值 isModel：isModel=true 并在单击时切换它：

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

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

How to display one list or another in the same angular component through buttons?

angular

angular7

html-lists

angular-ng-if