下拉菜单未显示加载值

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

您需要将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);
        });
    });
}

Answer 2

根据我对我们问题的理解，只需将模板文件更新为：

<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>

并从您的 ts 文件中删除 this.updateForm.get('completed').setValue(this.completed); 行。

由于我没有任何外部 API 数据的来源，我创建了一个演示 Here

如果这对您有帮助，请告诉我。