Question

我试图通过动态选择框为角度5实现选择选项，具体取决于哪个后端组件发送选择。

请注意，两个selectBox都是同一个盒子，只是选项内部的值发生了变化。

selector.html

<html>
...
    <select>
            <option *ngFor="let selectorA in selectorAs">{{selectorAs}}</option>
    </select>
...

selector.ts

import{component} from '@angular/core'
@component({
selector: 'app-root'
templateUrl: './selector.html'
styleUrl: './selector.css'
})
export class AppComponent{
title = 'app';
selectorAs = ["option 1", "option 2", "option 3"];
selectorBs = ["option A", "option B", "option C"];

所以我的问题是如何根据选择传递的标志使选择选项动态化以选择选择器B而不是选择器A？

Answer 1

您可以定义一个指向当前选项列表的变量：

export class AppComponent{
  choicesA = ["option 1", "option 2", "option 3"];
  choicesB = ["option A", "option B", "option C"];
  currentChoiceList: string[];

  processBackendData() {
    this.currentChoiceList = condition ? this.choicesA : this.choicesB;
  }
}

并在模板中使用它：

<select>
  <option *ngFor="let choice of currentChoiceList">{{choice}}</option>
</select>

如何动态地在角度5中选择下拉列表？

1 个答案: