Двусторонняя привязка данных в автозаполнении компонента

Question

У меня есть 2 файла ввода:

1) курсы (i, компонент автозаполнения фильтра e)
2) сумма (i, компонент ввода e), которые отображаются, как показано на рисунке ниже:

Здесь я хочу выполнить двухстороннюю привязку данных.i, e Если я изменю Course имя, Amount должно измениться в соответствии с Course.Как я могу добиться этого?

Вот ссылка stackblitz .

Answer 1

Можно создать словарь значения ключа для компонента следующим образом

options: {(option: string): number} = {'Maths': 20000, 'Physics': 20000,'Biology': 20000};

Использование Object.keys для получения автозаполнения ввода и добавления привязки выбранной опции для сохранения выбранной опции.

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample implements OnInit {
  myControl = new FormControl();
  options: {(option:string):number} = { 'Maths': 20000, 'Physics': 20000, 'Biology': 20000};
  filteredOptions: Observable<string[]>;
  selectedOpt: string;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return Object.keys(this.options).filter(option => option.toLowerCase().includes(filterValue));
  }
}

Сумма, которую вы можетепривязать значение к

options [selectedOpt]

получить значение по умолчанию из словаря и установить на входе

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Courses" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="selectedOpt">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

 <mat-form-field>
    <input matInput placeholder="Amount" [value]="options[selectedOpt]">
  </mat-form-field>

Answer 2

Привет для неопределенного вы получаете просто изменить кусок кода

enter code here[value]="options[selectedOpt] == undefined ? '' : options[selectedOpt]" 

Answer 3

Пожалуйста, используйте ниже код

HTML

 <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event, row, column, rowIndex)">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>

<input matInput placeholder="Amount" [(ngModel)]="amount">

в TS

  optionSelected(event){
    if(event.option.value == 'Physics')
      this.amount = 2000;
    if(event.option.value == 'Maths')
      this.amount = 5000;
    if (event.option.value == 'Biology')
      this.amount = 10000;
  }