时间戳

首页 > 解决方案 > 无法在 Angula6 的 HTML 页面上预先选择 mat 单选按钮

html - 无法在 Angula6 的 HTML 页面上预先选择 mat 单选按钮

问题描述

在 Angular 6 应用程序中包含单选按钮输入的新要求。有两个页面：请求和批准。用户在请求页面输入值并提交请求。审批者应该在审批页面上打开请求，并且应该能够看到请求者输入的所有详细信息。所有其他值都显示在审批者的页面中，但单选按钮没有根据请求者页面上提供的值预先选择。

注意：我们需要在两个页面上分别存储数据库条目的响应。

request.requestPurpose 的值正确显示并显示在单选按钮上方。我也使用过 ng-checked 但它不起作用。此外，当我对任何特定单选按钮使用 [checked]="true" 时，它不起作用。

<h3>{{request.requestPurpose}}</h3>
<h4>{{request.dispensePurpose}}</h4>
<mat-radio-group required name="purpose" [(ngModel)]="request.dispensePurpose">
  Please select the request purpose :<br >
   <mat-radio-button value="Manufacturing"  *ngIf="request.reevaluationDate" [checked]="request.requestPurpose==='Manufacturing'" >Manufacturing stuff</mat-radio-button ><br>
    <mat-radio-button value="Manufacturing" [checked]="request.requestPurpose==='Manufacturing'" >Manufacturing and cleaning stuff</mat-radio-button><br>
    <mat-radio-button value="Development" [checked]="request.requestPurpose==='Development'">Dev is in progress</mat-radio-button><br>
    <mat-radio-button value="Testing" [checked]="request.requestPurpose==='Testing'">testing is being done</mat-radio-button><br>
    <mat-radio-button value=" " [checked]="request.requestPurpose===' '">None of the above apply to this request</mat-radio-button>
</mat-radio-group>

应根据 request.requestPurpose 中存储的值预先检查按钮。

标签： htmlangularangular-materialradio-button

解决方案

我等待了答案，但没有得到答案。但是，我能够找出解决方案。

使用 [(ngmodel)] 时无法使用 [checked] 属性，因此我们可以在 .ts 文件中处理它。

在我的情况下，我默认使用以下命令根据 request.requestPurpose 中的值检查单选按钮：

request.dispensePurpose=request.requestPurpose

推荐阅读