Angular 8 - 多个变量不会从服务更新到组件

Question

我有一个函数，它仅在之前的选择字段具有“其他”选定值时才显示输入字段：

inputMotor = 'none';

this.f.get('motorType').valueChanges
    .subscribe((pVal) => {
    pVal === 'Other' ? this.inputMotor = 'flex' : this.inputMotor = 'none';
});

还有模板：

<div  class="form-group">
    <label  for="motorType">Motor Type</label>
    <select  class="form-control" formControlName="motorType" id="motorType" type="text">
        <option  value="">Choose the Motor Type</option>
        <option  value="Value 1">Value 1</option>
        <option  value="Value 2">Value 2</option>
        <option  value="Other">Other</option>
    </select>
</div>
<div  class="form-group" [ngStyle]="{'display':inputMotor}">
    <input  class="form-control" formControlName="otherMotorType" placeholder="Other Motor Type" type="text">
</div>

在上面的示例中，我使用该函数来识别“motorType”字段中的选定值。问题是此功能适用于许多选择字段。所以，我试图为此生成一个通用函数。在我的服务中，我尝试过：

getField(form, field: string, inputField: string) {
  form.get(field).valueChanges
    .subscribe((pVal) => {
      pVal === 'Other' ? inputField = 'flex' : inputField = 'none';
  });
}

要调用该函数，我会使用：

this.utils.getField(this.f, 'motorType', this.inputMotor);

对组件的调用会识别前两个参数，但不会更新变量（在示例中为 inputMotor），始终将其值保持为“none”，并且不显示“Other”字段。

我按照this post 中的建议进行了尝试，但它仅适用于单个变量（它不可重复使用）。

另外，我试图避免组件中的任何代码重复。因此，对于我拥有的每个表单，我只是尝试调用服务函数并传递必要的参数。

我怎样才能做到这一点？

Answer 1

我认为如果您在要更改可见性的 div 内使用 *ngIf="form.get('motorType').value === 'Other'" 可能会更容易。

Answer 2

这里至少有 2 个问题

1. 函数的参数是按值传递的。当您在服务中尝试inputField = ... 时，该值不会分配给组件中的this.inputMotor，而是分配给函数的inputField 参数。

2. 正确的方法是将值返回给函数并在那里分配。但是函数是异步的。它的值不能同步返回。您需要从服务中返回 observable 并在组件中订阅它。

试试下面的

服务

使用map 运算符创建一个包含条件的自定义 RxJS 运算符

public mapField() {
  return <T>(source: Observable<T>) => {
    return source.pipe(
      map(pVal =>
        pVal === 'Outro' ? 'flex' : 'none'
      )
    );
  };
};

组件

并在组件中使用

inputMotor = 'none';

this.f.get('motorType').pipe(
  this.utils.getField()
).subscribe({
  next: pVal => this.inputMotor = pVal
});

更新：与其他表格一起使用

您可以在希望进行比较的任何地方输入此运算符。

表格 1

form1Value = 'none';

this.f.get('someValue').pipe(
  this.utils.getField()
).subscribe({
  next: pVal => this.form1Value = pVal
});

表格 2

form2Value = 'none';

this.f.get('someOtherValue').pipe(
  this.utils.getField()
).subscribe({
  next: pVal => this.form2Value = pVal
});

表格 3

form3Value = 'none';

this.f.get('yetOtherValue').pipe(
  this.utils.getField()
).subscribe({
  next: pVal => this.form3Value = pVal
});

等等。