Angular2 Click 方法总是返回 false 值

Posted 2023-03-13

【中文标题】Angular2 Click 方法总是返回 false 值

【英文标题】：Angular2 Click method always return false value

【发布时间】：2017-10-03 09:19:10

【问题描述】：

我有四个需要在后端验证的输入字段。所以我写了一个服务调用，根据输出我需要向输入字段添加类。因此，如果 OK，则为绿色，否则为红色。

我想对所有人使用相同的方法，因为后端验证是相同的。所以我试图从 on click 函数返回布尔值，但它总是返回 false。这是我的代码：-

  <div class="row"><div class="col-md-2 col-md-offset-2 nopadding"><div class="form-group   pull-right"><label>Query1:</label></div></div><div class="col-md-4 col-md-offset-0"><div class="form-group input-group"><input type="text" [ngClass]="red: !(query1ok),green: (query1ok)" class="form-control" name="query1" id="query1" [(ngModel)]="sampledetails.rules[0].query1"><span class="input-group-btn"><a  href="javascript:void(0)" class="btn btn-default"  (click)="[query1ok]:validateQuery(query1ok,sampledetails.rules[0].query1)" type="button"><i class="fa fa-play"></i></a></span></div></div></div> <div class="row"><div class="col-md-2 col-md-offset-2 nopadding"><div class="form-group   pull-right"><label>Query2:</label></div></div><div class="col-md-4 col-md-offset-0"><div class="form-group input-group"><input type="text" [ngClass]="red: !(query2ok),green: (query2ok)" class="form-control" name="query2" id="query2" [(ngModel)]="sampledetails.rules[0].query2"><span class="input-group-btn"><a  href="javascript:void(0)" class="btn btn-default"  (click)="validateQuery(query2ok,samplerdetails.rules[0].query2)" type="button"><i class="fa fa-play"></i></a></span></div></div></div><div class="row"><div class="col-md-2 col-md-offset-2 nopadding"><div class="form-group   pull-right"><label>Query3:</label></div></div><div class="col-md-4 col-md-offset-0"><div class="form-group input-group"><input type="text" [ngClass]="red: !(query3ok),green: (query3ok)" class="form-control" name="query3" id="query3" [(ngModel)]="samplerdetails.rules[0].query3"><span class="input-group-btn"><a  href="javascript:void(0)" class="btn btn-default"  (click)="validateQuery(query3ok,ssampledetails.rules[0].query3)" type="button"><i class="fa fa-play"></i></a></span></div></div></div><div class="row"><div class="col-md-2 col-md-offset-2 nopadding"><div class="form-group   pull-right"><label>Query4:</label></div></div><div class="col-md-4 col-md-offset-0"><div class="form-group input-group"><input type="text" [ngClass]="red: !(query4ok),green: (query4ok)" class="form-control" name="query4" id="query4" [(ngModel)]="samplerdetails.rules[0].query4"><span class="input-group-btn"><a  href="javascript:void(0)" class="btn btn-default"  (click)="validateQuery(query4ok,sampledetails.rules[0].query4)" type="button"><i class="fa fa-play"></i></a></span></div></div></div>


validateQuery(querystatus, query)
    this._validatorService.validateQuery(query).subscribe(
            (data) => 
                 return false;
            ,
            (err) =>
            return true;
            
        );
    

所以想知道是否可以从 angular2 中的 click 函数返回布尔值，如果可以，那么如何？

【参考方案1】：

您应该返回订阅的数据，如下所示

validateQuery(querystatus, query)
    this._validatorService.validateQuery(query).subscribe(
            (data) => 
                 return data;//////////////////////////
            ,
            (err) =>
            return true;
            
        );
    

更新 1

validateQuery(querystatus, query)
    this._validatorService.validateQuery(query).subscribe(
            (data) => 
                 this.queryok= false;
            ,
            (err) =>
                 this.queryok= true;
            
        );
    

您在 html 中的函数调用将是

(click)="validateQuery(query1ok,sampledetails.rules[0].query1)"

【讨论】：

我试过这种方式。同样的错误。我想在返回布尔值的错误数据中返回false。我的数据恢复为真，但在点击方法中我仍然是假的。只是想检查我是否正确分配了返回值？这是我的代码：- '(click)="query1ok=validateQuery(query1ok,sampledetails.rules[0].query1)"

您可以在团队查看器中使用吗？ query1ok 是什么意思？

抱歉，无法访问团队查看器。 query1ok 是我在类中声明的变量，例如 query1ok: boolean= true; 和我在 ngClass 中用于条件的相同变量

可以，但是这里 quer1ok 是硬编码的。我想将它传递给参数并使用它，因为我有 4 个需要验证的差异字段，并且我想对所有人使用相同的函数。请检查我更新的代码。

你使用*ngFor