mat-option (onSelectionChange) -- 值没有正确显示

Posted

技术标签:

【中文标题】mat-option (onSelectionChange) -- 值没有正确显示【英文标题】:mat-option (onSelectionChange) -- the value does not appear correctly 【发布时间】:2018-07-27 03:45:56 【问题描述】:

当我第一次在其下拉列表中选择城市时,该值不会出现。当我在第二个下拉列表中选择国家时,第一个下拉列表中的第一个值出现,第二个下拉列表中的第二个值不出现。关于我的代码中的问题有什么建议吗?

代码.ts

  updateForm(event: MatOptionSelectionChange , city: City, country_id: Country, region_id: Region) 
        if (event.source.selected) 
        this.Myform['controls']['country_id'].patchValue(this.country_id.value);
          this.Myform['controls']['city'].patchValue(this.city.value);
        
    

code.html

    <input formControlName="country_id" id="country_id" matInput placeholder="Select Region*" aria-label="State" [matAutocomplete]="auto"
      autoActiveFirstOption [formControl]="country_id">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option (onSelectionChange)="updateForm($event,country.id,'country_id')" id="country_id" *ngFor="let country of filteredOptionsCountry | async" [value]="country.name">
         country.name 
      </mat-option>
    </mat-autocomplete> 

   <input formControlName="city" id="city" matInput placeholder="Select City*" aria-label="State" [matAutocomplete]="auto1"
      autoActiveFirstOption [formControl]="city">
    <mat-autocomplete #auto1="matAutocomplete">
      <mat-option (onSelectionChange)="updateForm($event,city.id,'city')" *ngFor="let city of filteredOptionsCity | async" [value]="city.name">
         city.name 
      </mat-option>
    </mat-autocomplete> 

谢谢!

【问题讨论】:

【参考方案1】:

好吧,你会在第一次调用时修补你的值。但是在您的第一次通话中,您将此 this.country_id.value 称为 not set,因此未定义。在您的第二次通话中,this.country_id.value设置并将被添加。

这可能有助于您理解:

updateForm(event: MatOptionSelectionChange , city: any, country_id: any, region_id: any) 
   if (country_id !== '')
      this.Myform['controls'['country_id'].patchValue(country_id);
   
   if (city !== '') 
      this.Myform['controls']['city'].patchValue(city);
   

在 HTML 中:

(onSelectionChange)="updateForm($event, city.id, '', '')"

(onSelectionChange)="updateForm($event, '', country.id, '')"

【讨论】:

我改成这样:updateForm(event: any, city: any, country_id: any, region_id: any) if (event.isUserInput) this.Myform['controls']['country_id '].patchValue(country_id); this.Myform['controls']['city'].patchValue(city); this.Myform['controls']['region_id'].patchValue(region_id); 和 html: country.name

以上是关于mat-option (onSelectionChange) -- 值没有正确显示的主要内容,如果未能解决你的问题,请参考以下文章

来自2个不同Web服务的Angular Populate mat-optgroup / mat-options

材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?

角度材质样式

如何获得选择的垫子选项的价值?

如何使用带有条件的mat表扩展行

角度材料选择不会检测到嵌套组件生成的选项的更改