在 *ngIf 上使用 "or" 来检查变量的一个或另一个值

Question

场景：我正在做一个项目，我必须使用按钮显示管弦乐队的不同组件。我所做的是在我的 class 中设置一个名为 "component" 的变量，如下所示：

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

@Component({
  selector: 'app-orchestra',
  templateUrl: './orchestra.component.html',
  styleUrls: ['./orchestra.component.scss']
})
export class OrchestraComponent implements OnInit {

component:string

ngOnInit() {

  }
}

并制作了一个接收参数 "ins" 的方法（用于仪器）并将变量值更改为该参数：

selected(ins){
  this.component = ins
}

在我的模板上制作了一些按钮和 div：

<button (click)="selected('violines')">violines</button>
<button (click)="selected('percussion')">percussion</button>
<button (click)="selected('doublebass')">double bass</button>

<div *ngIf="component === 'violines'">All the violines here</div>
<div *ngIf="component === 'percussion'">All the percussion here</div>
<div *ngIf="component === 'doublebass'">All the doublebass here</div>

问题：

到目前为止一切正常，但我想制作一个按钮在屏幕上显示所有乐器，所以我考虑制作一个按钮将 "ins" 变量设置为一个值 'all' ，但我不知道是否可以使用 *ngIf 检查变量的两个值，如下所示：

<div *ngIf="component === 'violines' or 'all'">All the violines here</div>

Answer 1

为什么不这样做呢？

<div *ngIf="component === 'violines' || component === 'all'">All the violines here</div>

在 *ngIf 上使用 "or" 来检查变量的一个或另一个值

use "or" on *ngIf to check one or another value of a variable

conditional

angular-ng-if

angular