Mat-select не показывает выбранное значение

Это то, что я получаю Когда моя форма редактирования загружена, я хочу заполнить массив формы начальными значениями. Моя опция выпадающего выбора была отключена, но она не отображается в поле выбора коврика.

let selectedSpecs = this.editData.element.specifications;

this.spec = this.specForm.get('spec') as FormArray;

if (selectedSpecs.length != 0){
  let selectedAttributeIds = [];
  selectedSpecs.forEach((spec, i) => {
    let attribute;
    attribute = {'id': spec.itemDetailId, 'itemId':this.editData.element.itemId, 'name': spec.name};

    this.spec.push(this.formBuilder.group({
      attribute: attribute,
      attributeSpec: spec.description
    }));

    selectedAttributeIds.push(spec.itemDetailId);

  });

  let attributes = [];
  this.selectedCatAttributes.forEach((tempattribute) => {
    let selected;
    if (selectedAttributeIds.includes(tempattribute.id)) {
      selected = true;
    }else {
      selected = false;
    }
    attributes.push(new Attribute(tempattribute, !selected));
  });

  this.attributeList.next(attributes);


}





<div formArrayName="spec" *ngFor="let spec of specForm.get('spec')['controls']; let i= index">
      <div [formGroupName]="i">
        <mat-card class="addShadow">
          <button style="float: right" mat-icon-button (click)="removeSpec(i)"><mat-icon class="specClear">cancel</mat-icon></button>


          <mat-form-field class="spec">
            <mat-select placeholder="Select Attribute" formControlName="attribute" (selectionChange)="selectedOption($event.value,i)">
              <mat-option *ngFor="let attribute of attributeList | async; let index = index" [value]="attribute.attribute" [disabled]="!attribute.allowed">
                {{attribute.attribute.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field class="spec">
            <input matInput placeholder="Specification" formControlName="attributeSpec">
          </mat-form-field>
        </mat-card>
      </div>
    </div>

Как мне показать начальные значения в выпадающих списках. Я использую массивы форм. Я пытался использовать [value], а также [compareWith], у меня ничего из этого не сработало.


typescript javascript formgroups angular6 angular-material-6
person Samasha    schedule 27.09.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я столько раз пытался найти способ решить эту проблему. Я использовал [compareWith] для решения проблемы. Вот мое решение.

Это мой метод, который я вызвал в [compareWith].

attributeDisplay(attribute1,attribute2){
if (attribute1.id == attribute2.id) {
  return attribute1.name;
} else {
  return "";
}

}

Вот мой html.

 <mat-form-field class="spec">
            <mat-select placeholder="Select Attribute" formControlName="attribute" (selectionChange)="selectedOption($event.value,i)" [compareWith]="attributeDisplay">
              <mat-option *ngFor="let attribute of attributeList | async; let index = index" [value]="attribute.attribute" [disabled]="!attribute.allowed">
                {{attribute.attribute.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>
person Samasha    schedule 02.10.2019
comment
Большое спасибо за то, что поделились результатом! ???? Эта часть (compareFn) не задокументирована в официальных документах для множественного выбора ????‍♂️ - person Fyodor; 07.10.2020
comment
Хороший. Я не знал об этой функции. - person scipper; 14.04.2021