时间戳

首页 > 解决方案 > 角度默认值

angular - 角度默认值

问题描述

我有 2 个问题。

  1. 我想将下拉列表的默认值设置为数组中的第一项。
  2. 一旦项目默认为数组中的第一项，我想触发（更改）甚至设置第二个下拉列表的值。

问题：即使我从选择中删除了第一个选项，它仍然会插入一条空白记录。所以，如果我的数组中有A, B,C并且我遍历数组，下拉列表似乎有 "" 然后是数组。我想A在下拉列表中，然后A从更改事件传递到另一个下拉列表。

我试过有：选择禁用。那没有用。我可以删除第一个选项，但它仍然插入一个空白值。

Angular 版本：11.2 使用模板表单。

模板：

<select name="agency" id="agency" class="form-control" [(ngModel)]="query.agency" (change)="onAgencyChange()">
      <!-- I even removed the first option but then it just inserts a blank in the dropdown. -->
      <option  *ngIf="isTrueOrFalse" value=""  >Select Agency...</option> 
      <option *ngFor="let agency of agencies; let i = index" [value]="agency.agencyCode" >{{agency.agencyCode}} - {{agency.agencyName}}</option>
</select>

班级：

query: any = {};
 isTrueOrFalse: boolean = false; //This will be set when retrieving data.

标签： angular

解决方案

对于第一个问题，您可以query在以下位置设置变量ngOnInit：

this.query.agency = this.agencies[0].agencyCode;

对于第二个问题，您可以onAgencyChange在设置默认值后调用。所以最好定义一个函数来设置默认值，然后调用更改方法onAgencyChange：

onAgencyChange(value) {
    console.log('changed call', value);
  }

 setDefault(){
    this.query.agency = this.agencies[0].agencyCode;
    this.onAgencyChange(this.query.agency);
  }

 ngOnInit() {
    this.setDefault();
  }

对于删除部分，您可以使用filter或splice根据您的要求。但是不要忘记删除函数后调用setDefault方法：

  removeFirstItem(){
    if(this.agencies.length >= 2){
     this.agencies = this.agencies.splice(1,this.agencies.length - 1);
     this.setDefault();
    }
  }

这是我为您编写的工作示例： https ://stackblitz.com/edit/angular-dropdown-wgzktv?file=app%2Fapp.component.ts

推荐阅读