angular - 需要 Angular 7 中的动态复选框列表控件

Question

我需要实现一个下拉列表控件，其中包含要在我的 Angular 7 应用程序中选择的复选框列表。如果他们使用过类似的控制，有人可以根据他们的经验告诉我。请注意，列表内容是动态的

HTML

 <app-checkboxes [values]="Currencies" [(ngModel)]="f.OtherCurrencyName"></app-checkboxes>

JSON

"Currencies": [
            {
                "Id": 7,
                "Name": "AUD"
            },
            {
                "Id": 10,
                "Name": "BND"
            },
            {
                "Id": 19,
                "Name": "BRL"
            },
            {
                "Id": 6,
                "Name": "CAD"
            },
            {
                "Id": 5,
                "Name": "CHF"
            },
            {
                "Id": 13,
                "Name": "CNH"
            },
            {
                "Id": 12,
                "Name": "CNY"
            },
            {
                "Id": 18,
                "Name": "DKK"
            }]

Answer 1

我建议创建一个实现 ControlValueAccessor 的自定义组件:

@Component({
  selector: 'app-checkboxes',
  templateUrl: './checkboxes.component.html',
  styleUrls: ['./checkboxes.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckboxesComponent),
      multi: true
    }
  ]
})
export class CheckboxesComponent implements ControlValueAccessor {
  @Input() values: string[] = [];
  selectedValues = {};

  onChange = (value: any) => { };
  onTouched = () => { };

  writeValue(initValue: any): void {
    this.selectedValues = initValue || {};
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

Here is a running example.