mat-select 组件的角度 patchValue答案

【问题标题】：Angular patchValue of a mat-select componentmat-select 组件的角度 patchValue
【发布时间】：2019-08-09 03:50:59
【问题描述】：

在我的 Angular 7 应用程序中，我正在以反应形式使用角度材料的组件 mat-select。

视图如下所示：

<mat-form-field class="col-md-3" color="warn">
   <mat-select placeholder="Selectionner la boutique"
             id="libelleShop"
             [(value)]="selectedlibelleShopoValue"
             ngDefaultControl
             formControlName="libelleShop"
             (selectionChange)="onShopSelectionChanged($event)">
             <mat-option *ngFor="let shop of shopsList"
                          [value]="shop">
                {{shop.storeName}}
            </mat-option>
  </mat-select>

Md数据如下：

shopsList= [
{
    'edoId': '2119',
    'storeName': 'AIX LES BAINS'
  },
  {
    'edoId': '2123',
    'storeName': 'ANNEMASSE'
  },
  {
    'edoId': '2460',
    'storeName': 'ALENCON'
  },
  {
    'edoId': '2478',
    'storeName': 'Grand Evreux Carrefour'
  },
  {
    'edoId': '2632',
    'storeName': 'DESTRELAND'
  }
]

第一次加载后，选项成功出现在选择下拉列表中，并且我有一个按钮用于在单击时强制 mat-select 的值。

我试过这个：

onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = 'ALENCON';
    this.myForm.patchValue({'libelleShop': shopObjToDisplay });
}

不幸的是，我的数据似乎没有设置。

有什么想法吗？？

【问题讨论】：

this.myForm.patchValue({'libelleShop': shopObjToDisplay.storeName });?
我认为它需要引用您绑定到mat-select 的shopList 的对象之一。试试：this.myForm.patchValue({'libelleShop': this.shopList[2] });

标签： javascript angular angular-material angular-material2 angular-reactive-forms

【解决方案1】：

一个老问题...您可以使用 triggerValue 和 mat-select 和 patch 值来实现。

<mat-form-field class="full-width" appearance="fill">

                                    <mat-select #level formControlName="level">
                                        <mat-option value="Native Speaker">Native Speaker</mat-option>
                                        <mat-option value="Highly Proficient">Highly Proficient</mat-option>
                                        <mat-option value="Very Good Command">Very Good Command</mat-option>
                                    </mat-select>
                                </mat-form-field>

通过以上，你现在可以获取模板中的值了。

<div *ngIf="level.triggerValue && (level.triggerValue).length; else notSpecifiedDate" class="text-muted"
                                        fxFlex="100">{{level.triggerValue}}</div>
                                    <ng-template #notSpecifiedDate>
                                        <div class="text-muted" fxFlex="100">
                                            {{'Not Specified' | translate}}
                                        </div>
                                    </ng-template>

【讨论】：

google Angular Material 官方回答是什么？ compareWith 还是 triggerValue ？这两个看起来都不错
另外，新的第二段html是什么？该合并与第一段 html 有何关联？
嗨，但是这并没有发出整个对象，有没有办法做到这一点，问题留在这里stackoverflow.com/questions/60783901/…

【解决方案2】：

使用这个：-

    onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = 'ALENCON';
    this.myForm.patchValue({
       libelleShop: shopObjToDisplay 
    });
   }

【讨论】：

【解决方案3】：

您需要在 mat-select 输入上使用 compareWith 函数。

例子：

<select [compareWith]="compareFn"  [formControl]="selectedCountriesControl">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

【讨论】：

希望 Google Material 将其合并到下拉列表中，而不是解决问题，感谢您指定此
google Angular Material 官方回答是什么？ compareWith 还是 triggerValue ？这两个看起来都不错
这绝对应该是公认的答案。它比 triggerValue 版本更干净，并且 Angular Material 公开了 compareWith 输入以用于此目的，而 triggerValue 只是一个简单的属性。
嗨，但是这并没有发出整个对象，有没有办法做到这一点，问题留在这里stackoverflow.com/questions/60783901/…