Question

我有一个包含一些复选框的组件，如果函数返回真，则需要检查其中的一些复选框。我知道我无法使用* ngIf调用函数，因为angular可以无限调用它。我想做类似的事情：

<div *ngIf="this.chkFamilles(f.id); then thenBlock else elseBlock"></div>
          <ng-template #thenBlock>
            <input type="checkbox" checked class="form-check-input" name="chkFamilles" id="{{f.id}}">
            <label for="{{f.id}}">{{ f.nom }}</label>
          </ng-template>
          <ng-template #elseBlock>
            <input type="checkbox" class="form-check-input" name="chkFamilles" id="{{f.id}}">
            <label for="{{f.id}}">{{ f.nom }}</label>
          </ng-template>

这是我的HTML公式：

<form #f="ngForm" (ngSubmit)="onUpdateVariante(f.value)">
        <div class="form-group col-md-6" *ngIf="this.listAccessoires">
          <label class="control-label">Accessoire</label>
          <select required="true" name="accessoire" class="form-control" id="selectAccessoire" *ngIf="this.listAccessoires">
            <option *ngFor="let a of this.listAccessoires" value={{a.id}}>{{a.nom}}</option>
          </select>
        </div>
        <div class="form-group col-md-6">
          <label class="control-label">Familles</label>
        </div>
        <div class="form-group col-md-6" *ngFor="let f of this.listFamilles">
          <div *ngIf="this.chkFamilles(f.id); then thenBlock else elseBlock"></div>
          <ng-template #thenBlock>
            <input type="checkbox" checked class="form-check-input" name="chkFamilles" id="{{f.id}}">
            <label for="{{f.id}}">{{ f.nom }}</label>
          </ng-template>
          <ng-template #elseBlock>
            <input type="checkbox" class="form-check-input" name="chkFamilles" id="{{f.id}}">
            <label for="{{f.id}}">{{ f.nom }}</label>
          </ng-template>
        </div>
        <div class="form-group col-md-6">
          <button class="btn btn-success" type="submit">Save</button>
        </div>
      </form>

这是我的函数chkFamilles（）：

chkFamilles(idFamille : number): boolean{
    console.log("test");
    this.serviceQualif.getQualificationsByIdOperateurAndIdAccessoire(this.idOperateur, 2).subscribe(data =>{
      data.map((competence) =>{
        if(competence.famille.id == idFamille){
          return true;
          console.log("test");
        }
      })
    });
    return false;
  }

如果有人有解决方案，那将是有帮助的。

Answer 1

您可以这样做。 <input type="checkbox" [checked]="this.chkFamilles(f.id)" class="form-check-input" name="chkFamilles" id="{{f.id}}"/>

如果您有任何疑问，请告诉我。

如果函数返回true，如何检查复选框？

1 个答案: