Question

我正在尝试使用for循环将数据从Firebase获取到复选框，我尝试使用下拉列表框，但是我需要在复选框中使用它们

DROPDOWN方法

<div class="form-group">
    <label for="size">Size</label>
    <select #size="ngModel" [(ngModel)]="product['size']" name="size" id="size" class="form-control" required>
      <option value=""></option>
      <option *ngFor="let s of size$ | async" [value]="s.key">{{s.key}}</option>
    </select>
    <div class="alert alert-danger" *ngIf="size.touched && size.invalid">
      You have to select size.
    </div>
  </div>

Answer 1

您可以使用以下代码来实现：

import { Component,OnInit } from "@angular/core";  
  
//decorator  
@Component({  
     
    selector: 'app-sample-component',  
    template: `<div *ngFor='let s of size$ | async' class="custom-control custom-checkbox">
              <input type="checkbox" [checked]="product['size'] === s.key" class="custom-control-input" (change)="select($event,s.key)" [id]="s.key">
              <label [attr.for]="s.key" class="custom-control-label" for="customCheck1">{{s.key}}</label>
            </div>`  
})  
  
export class SampleComponent implement onInit{  
    product:any; 
    size$:any;
    select($event,key){
       this.product['size'] = $event.target.checked ? key : undefined;
    }
    ngOnInit(){
      // get your data here
    }
}

使用For循环的Angular Firebase复选框

1 个答案: