使用 Angular 在按钮单击时添加新的下拉菜单

Posted 2023-03-13

【中文标题】使用 Angular 在按钮单击时添加新的下拉菜单

【英文标题】：Adding a new dropdown menu on button click with Angular

【发布时间】：2021-12-21 00:23:21

【问题描述】：

我正在尝试在用户单击按钮时添加新的下拉菜单。由于我是 Angular（打字稿）的新手，因此尝试创建其他属性字段时遇到了一些困难。我不确定使用由 ngFor 控制的数组来跟踪新添加的下拉列表是否更好。任何建议表示赞赏

html

<h3>Attribute</h3>

<button>Add new Attribute</button>

<select (change)="updateAttributeSelected($event)">
  <option *ngFor="let attribute of this.attributes" [value]="attribute">
     attribute 
  </option>
</select>

<div id="divider">
  <h3 id="groupValue">Select group value</h3>
  <select (change)="updateSelectedGroupValue($event)">
    <option *ngFor="let value of this.groupValues" [value]="value">
       value 
    </option>
  </select>

  <div></div>

  <h3>Statement</h3>
  <input type="text" [value]="this.attributeField" />
</div>
<div>-------------</div>

<div>
  Console Area
  <div></div>
</div>

ts 代码

export class DropDownComponent 
  groupValues = ['All Values', 'Explicit Values', 'Ranges'];
  attributes = ['startTimeIso', 'speedTime', 'subscriberId', 'chargeNumber'];

  public elements: Array<string>;
  public attributeSelected = this.attributes[0];

  public selected = this.groupValues[0];

  public attributeField: string;
  public groupTypeValue: string;
  public allValues: AllValues;

  constructor() 
    this.attributeField = '';
    this.elements = new Array<string>();
    this.setDefaultAttribute();
  

  public setDefaultAttribute() 
    let baseAttribute = this.attributeField;
    return baseAttribute;
  

  public updateSelectedGroupValue(value) 
    this.selected = value.target.value;
    this.groupTypeValue = this.selected;
  

  public updateAttributeSelected(field) 
    this.attributeSelected = field.target.value;
    this.attributeField = this.attributeSelected;
  

  public buildAllValues() 
    this.allValues.buildFacet(this.attributeField, groupType.ALL_VALUES);
  

【参考方案1】：

我认为你应该将你的属性存储在BehaviorSubject 中，因为这样可以让你更强大地查询和更新你的状态——以及通知 Angular 的 ChangeDetection 来更新你的表现层。您的问题的最小再现如下 - 我认为从这一点开始您可以实现自己的自定义逻辑。

.html

<h3>Attribute</h3>

<button (click)="onAddNewClick()">Add new Attribute</button>

<select (change)="updateAttributeSelected($event)">
  <option *ngFor="let attribute of this.attributes | async" [value]="attribute">
     attribute 
  </option>
</select>
// ...your logic goes on...

.ts

// ..your logic..
  public attributes = new BehaviorSubject<Array<string>>(['startTimeIso', 'speedTime', 'subscriberId', 'chargeNumber']);

//... your logic ...

  public onAddNewClick() 
    const newAttr = '<your-new-attribute>';
    this.attributes.next([...this.attributes.value, newAttr]);
  

单击按钮后，该函数将紧随当前属性和新属性 - 并且 | async 管道（从 CommonModule 导入）将处理您的表示层更新。