Angular связать строковое значение в компоненте многоразового флажка

Question

Я создал компонент флажка для повторного использования, чтобы выбрать одно значение, которое будет добавлено в виде строки, а не логическое значение. Проблема в том, что значение не связано в компоненте, который использует компонент флажка, только в методе onChangeCategory (). Что мне делать?

флажок. html:

<div class="form-check" *ngFor="let cat of options">
              <input class="form-check-input"  (change)="onChangeCategory(cat, $event.target.checked)"name="{{ cat }}" type="checkbox" id="{{cat}}">
              <label class="form-check-label" for="{{cat}}">
                {{cat}}
              </label>
            </div>

checkbox.ts:

@Input() name: string;
@Input() options: string[];
@Input() selectedValue: string;

onChangeCategory(option: string, isChecked: boolean){ // Use appropriate model type instead of any
    if(isChecked) {
      this.selectedValue = option;
    }
    else {
      this.selectedValue = this.options[0];
    }

  }

компонент, использующий флажок - html:

<app-checkbox [options]=sexOptions
              [selectedValue]=selectedValue>
</app-checkbox>

компонент с использованием флажка - ts:

sexOptions: string[] = ['Male', 'Female'];
selectedValue: string; //this should take the value from the checkbox

Answer 1

Попробуйте использовать подход «BANANA IN A BOX», где ваш @Input также равен @Output, см., Например, статью .

HTML

<app-checkbox [options]=sexOptions
              [(selectedValue)]=selectedValue>
</app-checkbox>

TS

export class CheckboxComponent {
  @Input() name: string;
  @Input() options: string[];
  @Input() selectedValue: string;
  @Output() selectedValueChange = new EventEmitter<string>();

  private toggle: {[key: string]: string};

  ngOnInit() {
    // I aasume we have only 2 string options
    this.toggle = {
      [this.options[0]]: this.options[1],
      [this.options[1]]: this.options[0]
    };
  }

  onChangeCategory(option: string, isChecked: boolean) {
    this.selectedValue = isChecked ? option : this.toggle[option];
    this.selectedValueChange.emit(this.selectedValue);
  }
}

Я создал STACKBLITZ для игры. В моем примере я добавил значение по умолчанию, если оно не требуется, просто не инициализируйте его. Также я изменил поведение чеков, чтобы иметь только одно значение (вид параметров радио)

Answer 2

Вы проверили около [@Output][1]?

Вы можете использовать его для запуска события между компонентом и передачи его значений. В вашем случае вы можете сделать:

@Input() name: string;
@Input() options: string[];
@Input() selectedValue: string;

@Output() change: EventEmitter<string> = new EventEmitter() 

onChangeCategory(option: string, isChecked: boolean){ // Use appropriate model type instead of any
  if(isChecked) {
    this.selectedValue = option;
  }
  else {
    this.selectedValue = this.options[0];
  }

  this.change.emit(this.selectedValue)
}

А когда вы используете этот компонент в родительском элементе, который хотите связать со значением, вы делаете

<app-checkbox-component (change)="onChange($event)"></app-checkbox-component>

И в родительском .ts файл

onChange(value) {
   console.log(value)
}