带有字符串值和 *ngIf 的 Angular 表单答案

【问题标题】：Angular Forms with string values and *ngIf带有字符串值和 *ngIf 的 Angular 表单
【发布时间】：2021-07-02 13:21:49
【问题描述】：

如果表单为空，我会尝试不在列表中显示表单。表单的值是字符串。我尝试使用 *ngIf 但它不起作用，我仍然可以在列表中看到空白位置。我该如何解决这个问题？（图中 ISRawMaterialInspection 和 ISRawMaterialRiskState 是空的。）

这是 HTML：

<input matInput class="mt-20" formControlName="IsOxidizable" *ngIf="form.get('IsOxidizable').value"/>

    <input matInput class="mt-20" formControlName="ISRawMaterialInspection" *ngIf="!!form.get('ISRawMaterialInspection').value"/>
                        
    <input matInput class="mt-20" formControlName="ISRawMaterialRiskState" *ngIf="form.get('ISRawMaterialRiskState').value"/>

这里是 TS：

        IsOxidizable: new FormControl({
            value: this.data.IsOxidizable,
            disabled: true,
        }),
       
        ISRawMaterialRiskState: new FormControl({
            value: this.data.ISRawMaterialRiskState,
            disabled: true,
        }),
        ISRawMaterialInspection: new FormControl({
            value: this.data.ISRawMaterialInspection,
            disabled: true

【问题讨论】：

您可以尝试检查控件而不是控件值吗？ form.get('ISRawMaterialRiskState')
我也试过了，但是没用
你能分享带有<form标签的完整html以及ts部分吗？
查看这个 stackblitz 例如：stackblitz.com/edit/… 您的服务中的值是作为空字符串还是空字符串返回？如果为 null 你会很好，否则你的支票会在 !== ''
如果您可以粘贴完整的 html / ts，那将很有帮助。如果您总是从服务中获得价值，那么您的 ngIf 将始终为真，因此始终显示且无关紧要。

标签： javascript html css angular typescript

【解决方案1】：

在Eliseo的一些评论输入后，我之前的回答需要一些编辑。

正如埃利塞奥所说的

如果 a 等于未定义，则打字稿中的 if(a) 条件为假， null, "",0 或 false

    <input matInput class="mt-20" formControlName="IsOxidizable" *ngIf="form.get('IsOxidizable').value && form.get('IsOxidizable').value !== ''"/>

    <input matInput class="mt-20" formControlName="ISRawMaterialInspection" *ngIf="form.get('ISRawMaterialInspection').value form.get('IsOxidizable').value !== ''"/>
                        
    <input matInput class="mt-20" formControlName="ISRawMaterialRiskState" *ngIf="form.get('ISRawMaterialRiskState').value form.get('IsOxidizable').value !== ''"/>

但考虑到 OP 已经接受了答案并且可能解决了问题，这里有一个问题。

var a = new String('');

if (a) -> will evaluate to true

所以也许 OP 没有使用原始字符串，而是使用 String 对象。

如果 a 等于未定义，则打字稿中的 if(a) 条件为假， null, "",0 或 false 仅适用于原始数据类型。

if (new Boolean(false)) -> evaluates to true
if (new String('')) -> evaluates to true
if (new Number(0)) -> evaluates to true

最后感谢 Eliseo 的澄清，帮助我变得更好。

【讨论】：

@Eliseo 你是对的。我已经删除了我的 cmets，以免让 OP 更加沮丧，并在您的帮助下编辑了我的答案。
对不起，我有时很挑剔，但是如果 a=0，b=false 和 c=""，if(a) 被评估为 false，if(b) 被评估为 false，如果(c) 也被评估为假。当您写 if (new Boolean(false)) 时，给出 true 因为是 [Boolean:false] 方式中的“对象”（是的是一个奇怪的对象） - new Number(0) 和 new String('') 也会发生同样的情况 -

【解决方案2】：

更改 HTML 并使用

 <input matInput class="mt-20" formControlName="IsOxidizable" *ngIf="form.get('IsOxidizable').value && form.get('IsOxidizable').value !== ''"/>

工作。之后，我也更改了主 TS，没有在 HTML 代码中添加form.get('IsOxidizable').value !== ''。因为它总是会返回它的标题，所以我编辑了主要的 TS，如下所示：

ngAfterViewInit() {
        setTimeout(() => {
            if (this.rawMaterialInformation) {
                this.rawMaterialInformation.IsOxidizable = this.rawMaterialInformation.IsOxidizable?
                    "Oksitlenme :" + this.rawMaterialInformation.IsOxidizable:'';

                this.rawMaterialInformation.MeltingTemperature = this.rawMaterialInformation.MeltingTemperature?
                    "Eritilme Sıcaklığı : " +
                    this.rawMaterialInformation.MeltingTemperature:'';

}

它是双向的。

【讨论】：

Nop Rocket, if value, value!==''