Question

我希望通过数据列表选择一个对象，但是，在选择时，我不会得到整个对象，而只会得到一部分。我想到的一种解决方案是，我输入id作为[value]并再次读取该对象，但是我发现该变体非常不愉快。还有其他获取对象的方法吗？

HTML：

<form [formGroup]="myForm" (ngSubmit)="save()">
    <input type="search" list="objects" formControlName="selectedObject" (change)=userInput() 
      class="form-control">
        <datalist id="objects">
          <option *ngFor="let o of obj" [value]="o.name">
            {{o.id}}, {{o.info}}
          </option>
        </datalist>
</form>

TS：

selectedObject: IObjects;

userInput() {
    console.log('this.myForm.value.selectedObject');         // Output: o.name (or without [value]: 
                                                                 o.id, o.info
    console.log('this.myForm.value.selectedObject.name');    // Output: undefined
}

Answer 1

您将输出设置为o.name，尝试将输出设置为<option *ngFor="let o of obj" [value]="o">，则整个对象将能够在控制器中访问以查看对象的相关属性。

<form [formGroup]="myForm" (ngSubmit)="save()">
    <input type="search" list="objects" formControlName="selectedObject" (change)=userInput() 
      class="form-control">
        <datalist id="objects">
          <option *ngFor="let o of obj" [value]="o">
            {{o.id}}, {{o.info}}
          </option>
        </datalist>
</form>

另一个例子：

HTML：

<select class="custom-select" (change)="changeCity($event)" formControlName="cityName">
              <option value="">Choose your city</option>
              <option *ngFor="let city of City" [ngValue]="city"> 
              {{city.name}}</option>
 </select>

在控制器中。

export class AppComponent {
  isSubmitted = false;

  // City Names
  City: any = [{ id: 1, name: "Florida" }, { id: 2, name: "XXXX" }];

  constructor(public fb: FormBuilder) {}

  /*Form */
  registrationForm = this.fb.group({
    cityName: ["", [Validators.required]]
  });

  // Choose city using select dropdown
  changeCity(e) {
    alert(
      "ID :" +
        this.registrationForm.value.cityName.id +
        " NAME :" +
        this.registrationForm.value.cityName.name
    );
  }
}

请找到堆栈闪电示例here。

从数据列表返回对象

1 个答案: