自动完成组件中的2向数据绑定

Question

我有2个输入文件名：

1）课程（即过滤器自动完成组件）
2）金额（即输入成分）如下图所示：

在这里，我想执行2路数据绑定。即，如果我更改Course的名称，Amount应该根据Course进行更改。我该如何实现？

这是stackblitz链接。

Answer 1

可以通过以下方式在组件上创建键值字典

  

选项：{（option：string）：number} = {'数学'：20000，'物理'：   20000，“生物学”：20000};

使用Object.keys获取自动完成输入并添加选定的选项bindig以存储选定的选项。

@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));
  }
}

您可以将值绑定到的金额

  

选项[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

请使用以下代码

HTML

fullList

在TS

LinkedHashMap

Answer 3

您好，对于未定义，您只需更改代码即可

DialogFragment dialogFragment = new DatePickerFragment();
        dialogFragment.show(getSupportFragmentManager(), "DatePicker");