Раскрывающийся список не показывает значения при загрузке

Question

У меня есть раскрывающийся список в файле component.html, который необходимо заполнить значениями, когда пользователь нажимает кнопку редактирования.Теперь все значения, включая значение раскрывающегося списка, извлекаются, но раскрывающийся список является единственным элементом управления, на который пользователь должен щелкнуть, чтобы просмотреть значения.Я хочу, чтобы в раскрывающемся списке отображалось значение без щелчка пользователем.

Вот код для component.html,

<mat-form-field>
    <mat-select placeholder="Completed" formControlName="completed" #completed>
        <mat-option value="true">Yes</mat-option>
        <mat-option value="false">No</mat-option>
    </mat-select>
</mat-form-field>

А вот код для моего класса компонента редактирования,

ngOnInit() {
    this.route.params.subscribe(params => {

        this.id = parseInt(params.id);
        this.blogService.getBooksById(this.id).subscribe(res => {
            this.book = res;
            this.completed = this.book[0].completed;

            if (this.book[0].completed == true)
                this.completed = "Yes"
            else
                this.completed = "No"

            this.updateForm.get('title').setValue(this.book[0].title);
            this.updateForm.get('comments').setValue(this.book[0].comments);
            this.updateForm.get('completed').setValue(this.completed);
        });
    });
}

Так что ошибок нет.Я могу редактировать и сохранять.Но я не хочу, чтобы пользователь щелкнул раскрывающийся список, чтобы увидеть значения.В раскрывающемся списке должно отображаться значение completed для соответствующей книги, полученной из формы.updateForm имеет тип FormGroup.Спасибо.

Answer 1

В соответствии с моим пониманием нашего вопроса, просто обновите файл шаблона следующим образом:

<mat-form-field>
    <mat-select placeholder="Completed" [(ngModel)]="completed" #completed>
        <mat-option value="true">Yes</mat-option>
        <mat-option value="false">No</mat-option>
    </mat-select>
</mat-form-field>

И удалите строку this.updateForm.get('completed').setValue(this.completed); из вашего файла TS.

Поскольку у меня нет источника для любоговнешние данные API, я создал демо Здесь

Пожалуйста, дайте мне знать, если это поможет вам.

Answer 2

Вам нужно установить this.completed в «true» или «false» вместо «yes» или «no», потому что это значение вашего mat-otion

, код должен выглядеть следующим образом:

ngOnInit() {
    this.route.params.subscribe(params => {

        this.id = parseInt(params.id);
        this.blogService.getBooksById(this.id).subscribe(res => {
            this.book = res;
            this.completed = this.book[0].completed;

            if (this.book[0].completed == true)
                this.completed = "true"
            else
                this.completed = "false"

            this.updateForm.get('title').setValue(this.book[0].title);
            this.updateForm.get('comments').setValue(this.book[0].comments);
            this.updateForm.get('completed').setValue(this.completed);
        });
    });
}