각도 - 선택 옵션 값으로 객체

각도 - 선택 옵션 값으로 객체

개체를 값으로 사용하는 다양한 선택 상자가 있는 양식이 있습니다.

<mat-option [value]="object">

양식을 통해 새 레코드를 만들 때 유용합니다.이제 제가 레코드를 편집할 때, 저는 문제에 부딪칩니다.object에서mat-select-option이(가) Rest Service에서 받는 "동일한" 개체가 아니므로 레코드를 편집할 때 선택 상자에 선택된 옵션이 없습니다.

선택 상자 위젯이 일치하도록 알려줄 수 있습니까?object.id어떤 옵션이 선택되었는지 결정할 때?이 문제를 해결하기 위해 지침을 작성해야 할 수도 있지만, Angular 또는 Angular Material 라이브러리나 다른 기존 솔루션으로 이미 가능할 수도 있습니다.

자세히 말하자면, 나는 나의 것을 가지고 있습니다.foo.component.ts파일:

let item = {
    'fruit': { id: 1, 'label': 'Pineapple' },
}

let options = [
    { 'id':1, 'label': 'Pineapple' },
    { 'id':2, 'label': 'Banana' },
    { 'id':3, 'label': 'Papaya' }
]

그리고 나의.html파일:

<mat-select  placeholder="Fruit" [(ngModel)]="item.fruit">
  <mat-option *ngFor="let option of options" [value]="option">{{option.label}}</mat-option>
</mat-select>

사용자가 페이지를 방문할 때, 그들은 "파인애플"이 선택된 것을 볼 것입니다.mat-select왜냐하면 '파인애플'은item.fruit그리고options배열이 동일한 '접두사' 개체를 가리키고 있지 않습니다.mat-select비어 있습니다.

다음과 같은 것을 보고 싶습니다.

<mat-select          
    placeholder="Fruit" 
    [(ngModel)]="item.fruit" 
    equalityAttr="id"
>

바로 그것입니다.[compareWith]지시의Angular.io 은 현재 다운되어 있으므로 참고를 위해 이 중간 기사에 잉크를 넣을 것입니다.

HTML

<mat-select  
    placeholder="Fruit" 
    [(ngModel)]="item.fruit"
    [compareWith]="objectComparisonFunction">

   <mat-option *ngFor="let option of options" [value]="option">{{option.label}}</mat-option>
</mat-select>

타입스크립트

  public objectComparisonFunction = function( option, value ) : boolean {
    return option.id === value.id;
  }

언급URL : https://stackoverflow.com/questions/51989366/angular-objects-as-select-option-values