Question

我正在尝试根据单选按钮组的选定值显示文本字段。

如果用户选择“是”，那么我想显示文本字段。如果用户选择“否”，那么我不想显示此文本字段。

下面是我的HTML：

 <radio-button-wrapper
    [(ngModel)]="damageReported"
    name="rdoDamageReported">

    <radio
        id="preselection_damageReported_01"
        heading="Yes"
        name="validationDamageReported"
        value="Yes">
    </radio>

    <radio                          
        id="preselection_damageReported_02"
        heading="No"
        name="validationDamageReported"
        value="No"
        (click)="clearSecondCompanyFields()">
    </radio>
</radio-button-wrapper>

<div class="form-group" *ngIf="damageReported.value === 'Yes'">
    <label
        for="txtOtherCompanyName"
        class="control-label">
            Please state the name of the other insurance company:
    </label>
    <input
        class="form-control"
        id="txtOtherCompanyName"
        name="txtOtherCompanyName"
        [(ngModel)]="otherCompanyName"
        type="text"/>
</div>

在我的.TS文件中，我有这个未初始化的变量：

public damageReported;

我在控制台中收到的错误消息是：

TypeError：_co.damageReported未定义

我知道这是因为我尚未在我的.TS文件中初始化 damageReported 。

但是如果我这样初始化它：damageReported = '';

在以后的代码中尝试使用单选按钮值时，出现此编译错误：

this.postData(
    this.damageReported.value
)


postData(
    damageReported: string
)

类型'string'上不存在属性'value'。ts（2339）

有人可以告诉我如何初始化变量，同时还可以使用 .value 属性吗？非常感谢！

Answer 1

编译器错误是非常方便的信息，我们应该尽力聆听。在这种情况下，编译器会告诉您类型string的没有没有value属性。

如果您查看docs的字符串实例，则会发现它确实没有value属性。

要解决您的问题，只需删除.value，使您的*ngIf指令如下所示：*ngIf="damageReported=== 'Yes'"。在尝试访问代码中的.value时，请确保还删除了strings的所有用法。

编辑：

我相信，结合以上所述，您的问题在于您将第三方库用于您的广播组/控件。 [(ngModel)]指令是Angular Forms指令，它依赖于带有一些关键细节的修饰控件。主要细节是实现Control Value Accessor的需要。看看this和/或this的帖子，看看外观如何。

在您的情况下，因为您使用的是第三方库，所以建议您创建一个实现以上功能的“包装器”组件，并在模板中使用它。

或者，如果您愿意不使用该第三方库，而更愿意使用Angular Material的Radio Buttons，那么您需要做的就是以下事情：

在项目中向Angular Material添加依赖项。如果使用npm：npm i @angular/material

在您的ngModule中，导入以下内容：import {MatRadioModule} from '@angular/material/radio';

更改模板以使用Angular Material组件：

<mat-radio-group [(ngModel)]="damageReported">
    <mat-radio-button value="Yes"></mat-radio-button>
    <mat-radio-button value="No"></mat-radio-button>
</mat-radio-group>

希望有帮助。

如何在Angular中初始化单选按钮组的value属性？

1 个答案: