无法在步进器组件中执行数据绑定

Question

我有2个输入字段，分别称为Course name（自动完成组件）和Price（输入组件）： 选择特定的Course name时，price会根据Course name显示，如下所示：

现在，我将这两个输入字段（i，e课程名称和价格）放置在 stepper组件中。然后没有发生数据绑定（i，e on选择course name我无法显示price）。

这里是link的堆叠闪电战

Answer 1

有两个问题：

1. 如果使用name，则应使用[(ngModel)]属性。但是您还没有使用它。

2. 此实现存在问题：

---

this.offeringControl.valueChanges.subscribe((d) => {
  console.log('Changed');
  console.log('d: ', d);
  if (d === 'CCNA Training') {
      this.price = this.matPrice;
    } else if (d === 'Java Coaching') {
      this.price = this.phyPrice;
    } else if  (d === 'PHP Training') {
      this.price = this.chemPrice;
    }
  });

在这里，字符串CCNA Training，Java Coaching和PHP Training应该是Maths，Physics和chemistry。

因为您的“自动完成”只有数学，物理和化学。

这是您推荐的fixed and Updated StackBlitz。