Как вывести тот или иной список в одном компоненте angular через кнопки? - PullRequest
Новая
       110

Как вывести тот или иной список в одном компоненте angular через кнопки?

0 голосов
/ 07 мая 2020

У меня есть два списка в моем 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 с помощью кнопок, чтобы одна или другая отображалась в соответствии с соответствующей кнопкой? Или как лучше всего это сделать? Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 07 мая 2020

В вашем компоненте возьмите логическую переменную экземпляра, которая будет действовать как переключатель для отображения ваших списков

  • Теперь, когда вы нажимаете кнопку showModels, сделайте это истинным, это означает, что вы отобразит menuModels
  • Теперь, когда вы нажимаете кнопку showOperators, сделайте ее ложной, это означает, что вы отобразите menuOperators

Попробуйте использовать Boolean как можно больше, сравнивая строку. Так как. логическое значение всегда будет иметь 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>

1 голос
/ 07 мая 2020

Вам нужно обернуть два списка следующим образом: 

<!-- 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
}
...