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

Question

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

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>