Как я могу установить выбранный атрибут для моего mat-option?

Question

У меня проблема с моим mat-select и mat-option управлением.Мне нужно установить выбранный атрибут на первый mat-option элемент управления без привязки на [(ngModel)] или [(value)].Мой элемент управления mat-option создается директивой *ngFor, но мне не требуется свойство в моем компоненте, которое обычно связывается с [(ngModel)] элементом управления mat-select UI.Итак, я попробовал это:

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect>
        <mat-option *ngFor="let currency of currencies; let isFirst = first" [value]="currency" [attr.selected]="isFirst ? 'selected' : null">
            {{currency | currencyName}}
        </mat-option>
    </mat-select>
</mat-form-field>

и это:

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect>
        <div *ngFor="let currency of currencies; let isFirst = first">
            <mat-option *ngIf="isFirst" selected [value]="currency">
                {{currency | currencyName}}
            </mat-option>
            <mat-option *ngIf="!isFirst" [value]="currency">
                    {{currency | currencyName}}
            </mat-option>
        </div>
    </mat-select>
</mat-form-field>

, и только это дало мне желаемый эффект:

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect [value]="currencies != null && currencies.length != 0 ? currencies[0] : null">
        <mat-option *ngFor="let currency of currencies;" [value]="currency">
            {{currency | currencyName}}
        </mat-option>
    </mat-select>
</mat-form-field>

но здесь я неt использовать выбранные атрибуты.Я использую привязку на [value], которая мне ужасно не нравится.

Я бы хотел, чтобы код был таким:

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect>
        <mat-option *ngFor="let currency of currencies; let isFirst = first" [value]="currency" [selected]="isFirst">
            {{currency | currencyName}}
        </mat-option>
    </mat-select>
</mat-form-field>

Как я могу это сделать?Еще раз, мне не нужно свойство в компоненте, которое идентифицирует выбранный элемент.Это важно.

Answer 1

Выбор Mat не работает напрямую с объектом, вы можете использовать сравнение с входом для mat-select следующим образом:

<mat-select [compareWith]="compareFn" [value]="initialValue"></mat-select>

Добавьте в свой файл Ts, например:

initialValue= {currencyID: 1, currencyName: 'USD'};
compareFn(a, b) {
  return a.currencyID == b.currencyID;
}