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

请告诉我这是否对您有帮助。

下拉列表未显示加载值

2 个答案: