Нужен динамический контроль списка флажков в угловых 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;
  }
}

Вот пример работы.