时间戳

首页 > 解决方案 > 以角度输入为条件，从其他输入中获取计算值

angular - 以角度输入为条件，从其他输入中获取计算值

问题描述

好的，所以我有一个只读的输入，它从其他输入中获取它的值，然后我试图运行一个条件来根据正在填充的输入值显示或隐藏。

<input id="incomeOutput" readonly="readonly "name="incomeOutput"   
   [(ngModel)]="incomeOutput"  [value]="[monthly_pension.value*12 + 
    monthly_investments.value*12 + monthly_annuities.value*12 +  
    monthly_SSI.value*12]" >

然后我有条件地检查像这样

[hidden]="(this.stepTwo.classList.value === 'step active' && (this.incomeOutput === 0))"

我已经incomeOuput设置了一个数字。

但是当我控制台incomeOutput它出现未定义时，我从来没有看到在条件期间所做的更改。除此以外，条件在所有情况下都可以正常工作。

标签： angular

解决方案

您不能使用 [(ngModel)] - 两种绑定方式 - 与 [value] 一起为一个变量赋值。

您可以使用模板引用变量（但模板引用变量，在 .html 中允许您访问 htmlInput，因此您可以使用incomeOutput.value - 在这种情况下，“值”是一个字符串 -）。

    <!--the #incomeOutput, indicate that is a template reference variable-->
    <!--see also that not use [ ]-->
    <!--and you need use a "+" to convert to "number", 
        in general the [(ngModel)] give us a "string"
        -->
    <input #incomeOutput" readonly="readonly "name="incomeOutput" 
           [ngModel]="+monthly_pension.value12 + (+monthly_investments.value12) 
                      + (+monthly_annuities.value12) + (+monthly_SSI.value12)" >
    
    <!--see how access to "value" of the htmlElement and the "+" before
        to convert To Number-->
    <div [hidden]="(this.stepTwo.classList.value === 'step active' && 
           +incomeOutput.value==0>

愚蠢的堆栈闪电战

推荐阅读