自动完成组件中的 2 路数据绑定答案

【问题标题】：2-way databinding in autocomplete component自动完成组件中的 2 路数据绑定
【发布时间】：2019-03-26 11:26:55
【问题描述】：

我有 2 个输入文件：

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

在这里我想执行 2-way 数据绑定。 i,e 如果我更改 Course 名称，Amount 应该根据 Course 更改。我怎样才能做到这一点？

这是stackblitz 链接。

【问题讨论】：

目前尚不清楚所选课程与显示的数量之间的关系。
我想我已经正确解释了问题中的所有内容。:)

标签： angular typescript angular-material angular6

【解决方案1】：

可以在组件上创建一个键值字典，在下一个方式

选项：{（选项：字符串）：数字} = {'数学'：20000，'物理'： 20000, '生物学': 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));
  }
}

你可以绑定值的数量

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

【讨论】：

感谢您的回答，一切正常。但默认情况下，输入字段（即金额）显示为undefined。
您可以创建一个get属性public get amount(): number { return this.options[this.selectedOpt] ? this.options[this.selectedOpt] : 0; } 并将数量绑定到数量输入<input matInput placeholder="Amount" [value]="amount">

【解决方案2】：

请使用下面的代码

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

【讨论】：

他目前使用的是响应式表单，而不是模板驱动的表单。这些不应混用。
是的，我正在使用反应形式@p4r1

【解决方案3】：

嗨，未定义，您只是更改了一段代码

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

【讨论】：

这里有一个待处理的编辑请求。致编辑：@osiris85：您在编辑描述中告诉 null 未检查。但实际上，== undefined 在 JavaScript 中同时检查 null 和 undefined（顺便说一下，== null 会这样做）。如果您删除== undefined，您正在检查该值是真还是假（假是0、''、null、undefined、NaN、false），这可能是或者不是所需要的。我没有批准也没有拒绝编辑，我不确定这是否相关。