角度面片垫片选择组件的值 [英] Angular patchValue of a mat-select component

问题描述

在我的角度7应用程序中，我正在使用反应形式的角度材料的组件垫选择。

该视图如下所示：

<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'
  }
]

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

我尝试过：

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

不巧的是，我的数据似乎未设置。

有什么想法？？

推荐答案

一个老问题...您可以通过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>

这篇关于角度面片垫片选择组件的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！