Question

我想要禁用带条件的按钮，例如我已经使用键生成了数据是日期。我想禁用按钮来创建一个新数据，该数据与我已将其推送到firebase的数据具有相同的日期。我在html上的代码是这样的：

<button ion-button full (click)="submitLaporan()" color='secondary' [disabled]="isEnabled()">Buat laporan harian</button>

这是打字稿上的代码：

isEnabled()
  {
    this.db.list('/laporan/'+this.id).subscribe(laporan =>{
      for(var i =0,j = 0;i<laporan.length;i++)
      {
        console.log("masuk laporan",laporan);
        if(laporan[i].mydate == this.tanggal)  
            return false;
        else
        {
          return true;
        }
      }
    })
  }

on function isEnabled()我想查询来自我的firebase的所有数据，然后将它与日期进行比较，如果firebase上的日期和离子上的日期具有相同的值，则应该返回false并且按钮是禁用。但这根本不起作用。

我没有与离子具有相同日期的数据，但按钮保持禁用状态。它应该被启用。

Answer 1

for循环中的return value存在问题。考虑到编写代码的方式，将只检查第一个元素，如果它等于this.tanggal，它将返回false，否则它将返回true。

您想要实现的是返回false，如果对于所有元素，则没有人包含给定日期。如果找到给定日期的出现，则会返回true。

this.db.list('/laporan/'+this.id).subscribe(laporan =>{
    let myVal = false;
    for(var i =0,j = 0;i<laporan.length;i++)
          {
            console.log("masuk laporan",laporan);
            if(laporan[i].mydate === this.tanggal)  
                myVal = true;

          }
    return myVal
 })

Answer 2

<强> HTML

<button ... [disabled]="isEnabled() | async">Buat laporan harian</button>

<强>打字稿

isEnabled() {
    return this.db.list('/laporan/'+this.id).switchMap(laporan =>{
      for(let i=0, x=laporan.length; i<x ;i++) {
        console.log("masuk laporan",laporan);

        if(laporan[i].mydate == this.tanggal) {
          return Observable.of(false);
        }
      }
      return Observable.of(true);
    });
}

您可能需要添加以下3行：

import { Observable } from 'rxjs/Observable';
import { of }         from 'rxjs/observable/of';
import { switchMap }  from 'rxjs/operators';

禁用条件为

2 个答案: