主页 / 问题 / 957356
Accepted
bruce
Asked:2020-03-17 01:26:39 +0000 UTC2020-03-17 01:26:39 +0000 UTC

如何以反应形式将 get/set 与控件连接起来？

  • 772

有一个模型：

export class People {
  address: string;
  document: {
    number: string;
    serial: string;
    lastName: string;
  };
  ...
  ctor
  ...
  get serialNumber() {
    return this.document.serial || '' + ' ' + this.document.number;
  }
  set serialNumber(value) {
    console.log('значения', value);
    const [serial, number] = value.split('');
    this.document.serial = serial;
    this.document.number = number;
  }
}

有一个表单组件（PeopleForm）：

this.people = new People();
this.peopleForm = new FormGroup({
      address: new FormControl(this.people.address, []),
      document: new FormGroup({
        lastName: new FormControl(this.people.document.lastName, []),
        serialNumber: new FormControl(this.people.serialNumber, []),
        license: new FormControl(this.people.document.license, [])
      })
});

从模型中可以看出，我在文档中有两个属性： serial，number。我希望这两个属性以单一名称serialNumber的形式出现（抛出某种掩码）。我在模型中创建了一个 get/set，但是，唉，由于某种原因它不起作用。

告诉我如何解决问题任务？

typescript

1 个回答

  1. Best Answer

    如果我理解正确，您想将表单绑定到您的People. 好吧，看，第一个选项是简单地监听表单值的变化并将该值设置为一个对象people：

    private readonly destroy$ = new Subject<void>();

constructor() {
  this.peopleForm.valueChanges.pipe(
    takeUntil(this.destroy$)
  ).subcribe((value) => {
    this.setValue(value);
  });
}

public ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

private setValue(value: People): void {
  for (const key of Object.keys(value)) {
    if (this.people.hasOwnProperty(key)) {
      this.people[key] = value[key];
    }
  }
}

    在这里，我们不value直接将对象的值设置为people( this.people = value)，因为生成的流值valueChanges是对象字面量，我们不想失去类的功能People。

    这种方法的问题是表单生成的对象的模型键与您的People.

    更好的选择是显式使用表单并分别订阅每个控件（这样您将 100% 确定所需的属性已设置），在类中People您可以创建多个方法来分别使用每个控件，控件本身将采用参数和生成器：

    export class People {
  private listenToControl(control: AbstractControl, destroy$: Subject<void>) {
    return control.valueChanges.pipe(takeUntil(destroy$));
  }

  public listenToAddressControl(
    control: AbstractControl,
    destroy$: Subject<void>
  ): void {
    this.listenToControl(control, destroy$).subscribe((address) => {
      this.address = address;
    });
  }

  public listenToSerialNumberControl(
    control: AbstractControl,
    destroy$: Subject<void>
  ): void {
    this.listenToControl(control, destroy$).subscribe((serialNumber) => {
      this.serialNumber = serialNumber;
    });
  }
}

    并像这样调用这些方法：

    this.people.listenToAddressControl(this.peopleForm.get('address'), this.destroy$);
this.people.listenToSerialNumberControl(
  this.peopleForm.get('document').get('serialNumber'),
  this.destroy$
);

    是否存在代码重复？当然。听起来像反模式？并非如此，因为您正在显式管理数据流，同时还消除了各种内存泄漏。

    当然，如果你的对象是一个简单的对象字面量，解决这样的问题会容易 100 倍people，但是你正在使用一个People有自己的业务逻辑、setter、getter 等的类实例。

    当然，您可以尝试作弊以避免重复：

    export const enum PeopleProperty {
  Address,
  Number,
  Serial,
  LastName
}

export class People {
  public listenToControl(
    control: AbstractControl,
    destroy$: Subject<void>,
    property: PeopleProperty
  ): void {
    control.valueChanges.pipe(takeUntil(destroy$)).subscribe((value) => {
      this.setValue(property, value);
    });
  }

  private setValue(property: PeopleProperty, value: any): void {
    switch (property) {
      case PeopleProperty.Address: {
        return this.address = value;
      }

      case PeopleProperty.Number: {
        return this.document.number = value;
      }

      case PeopleProperty.Serial: {
        return this.serialNumber = value;
      }
    }
  }
}

    那么控制设置代码就变成了：

    this.people.listenToControl(
  this.peopleForm.get('document').get('serialNumber'),
  this.destroy$,
  PeopleProperty.Serial
);
    • 0

相关问题