时间戳

首页 > 解决方案 > 如何根据Angular中的其他选择字段设置另一个字段值？

javascript - 如何根据Angular中的其他选择字段设置另一个字段值？

问题描述

我有一个对象数组，比如说

const countries = [
  {
    "country": "Afghanistan",
    "region": "Asia"
  },
  {
    "country": "Albania",
    "region": "Europe"
  },
  {
    "country": "Algeria",
    "region": "Africa"
  }
];

我有 2 个输入字段，国家和地区。如果用户使用选择选项选择国家，我需要将我的区域字段自动设置为该对象的相应区域。

<div class="form-group stylingtext mt-3">
  <label for="" class="pb-2">Movie Country</label>
  <select 
    class="form-select" 
    aria-label="Default select example" 
    formControlName="movie_country"
  >                           
    <option 
      *ngFor="let country of countries" 
      [value]="country.country"
    >
      {{country.country}}
     </option>
  </select>
</div> 

<div class="form-group stylingtext mt-3">
  <label for="" class="pb-2">Movie Region</label>
  <input
    class="form-control rounded-5"
    formControlName="movie_region" 
    required
  >
</div>

我还尝试了 select 中的（更改）事件，并在区域输入区域中使用了 ngmodel。但它不起作用。谁能帮我这个？

例如：如果我在国家/地区选择“阿尔及利亚”，我想在区域输入区域中选择“非洲”。

标签： javascripthtmlangularselect

解决方案

您可以尝试像这样观察国家/地区价值的变化：

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

ngOnInit(): void {
  this.formGroup.controls.movie_country.valueChanges.pipe(
    takeUntil(this.destroy$),
  ).subscribe(
    country => this.formGroup.controls.movie_region.patchValue(country.region)
  )
}

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

formGroupFormGroup 控件的名称在哪里。并使用 subjectdestroy$取消您的订阅。

推荐阅读