mat-select не устанавливает значение, когда отображается с * ngIf - PullRequest
1 голос
/ 02 апреля 2020

Я использую mat-select внутри таблицы (так, чтобы в каждой строке был один), который будет отображаться при выборе строки для редактирования.

Mat-select имеет * ngIf для скрыть, когда не в режиме редактирования. Он также заполняется картой ключ / значение внутри компонента. Значения принимаются и устанавливаются во время ловушки жизненного цикла ngOnInit. Выбор циновки также НЕ выполняется в форме.

Когда я выбираю режим редактирования, появляется выбор циновки, но он показывает пустую опцию, заставляя пользователей повторно выбирать опцию, уже примененную к строке. Я могу подтвердить, что их ключи и значения установлены правильно, и значение объекта для typeId также установлено.

Я пробовал несколько вещей, которые я обнаружил при переполнении стека, но до сих пор ни одна не работала. (например, используя выбранный атрибут, используя [(значение)] в mat-select и пытаясь написать метод для установки его при появлении).

Как я могу отобразить mat-select с помощью * ngIf и текущее значение отображается по умолчанию?

HTML

<ng-container [matColumnDef]="myColumn">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</th>
    <td mat-cell *matCellDef="let object">
        <mat-form-field *ngIf="object.edit">
            <mat-select #objectTypeId="ngModel"
                        placeholder="Type"
                        disableOptionCentering
                        [(ngModel)]="object.objectTypeId"
                        [(value)]="object.objectTypeId"
                        required>
                <mat-option *ngFor="let objectType of objectTypeSelectViewModel?.map | keyvalue" value="{{objectType?.key}}">
                    {{objectType?.value}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <span *ngIf="!object.edit">{{object?.objectType}}</span>
    </td>
</ng-container>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...