Angular Material => установить значение mat-select из formControlName

Question

Моя angular версия - 7. Я создаю форму, в которой есть один выпадающий список, чтобы выбрать опцию. Мой список работает для выбора, но когда я загружаю страницу, он не показывает предопределенное значение. Страница находится в форме для редактирования пользовательских данных. Ниже приведен мой html код,

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Server Name</mat-header-cell>
    <mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
        <mat-form-field>
            <!-- <input class="jminput" matInput formControlName="name" autocomplete="off"> -->
            <mat-select matSelect [formControl]="name">
                <mat-option *ngFor="let item of arr" value="item">{{item}}</mat-option>
            </mat-select>
            <mat-error *ngIf="name.touched && !name.required">
                Server Name is required
            </mat-error>
        </mat-form-field>
    </mat-cell>
</ng-container>

Когда я беру <input> вместо <mat-select>, он работает и отображает значение, в зависимости от того, какое значение будет исходным. Так что я думаю formControlName = "name" работает нормально. Но это не работает с <mat-select>.

Пожалуйста, предложите.

Answer 1

изменить value="item" на [value]="item"

Answer 2

Вы использовали [formControl]="name" вместо formControlName="name". Значение при запуске для этого элемента управления должно быть элементом массива arr.