问[ value ]属性中有多个值
EN

Stack Overflow用户

提问于 2021-05-25 15:03:42

回答 2查看 45关注 0票数 0

我想在app.ts文件中检索app.html文件中的多个值。

我试过做一个活动。我获得了value中的值，并且需要获得第二个值。因此，我通过创建一个自定义属性进行了测试，如以下代码所示：

  <div class="select-container">
    <label>
      <select class="sort-select" (change)="applySort($event)">
        <option [value]="false" [attr.columnName]="'dateCreate'">+ to -</option>
        <option [value]="true" [attr.columnName]="'dateCreate'">- to +</option>
        <option [value]="false" [attr.columnName]="'title'">A to Z</option>
        <option [value]="true" [attr.columnName]="'title'">Z to A</option>
      </select>
    </label>
  </div>

要恢复它，一方面我对价值没有问题，另一方面我不知道如何恢复另一个

  test(event: Event): void {
    console.log((event.target as HTMLInputElement).value);
  }

问题是我不能检索这个新值。

有没有更好的解决方案，或者如何解决我的问题？

angular

AIGC及大模型加速场景解决方案

为有AI内容生成、大模型需求的企业客户快速打造一站式方案

回答 2

Stack Overflow用户

发布于 2021-05-25 15:27:20

试试这个：

 applySort(event: Event): void {
   console.log('attr',(event.target as HTMLInputElement)[(event.target as HTMLSelectElement).options.selectedIndex].getAttribute("columnName"));
    
  }

票数 1

Stack Overflow用户

发布于 2021-05-25 15:17:39

保留大部分代码，您可以这样做。但它并不干净。

applySort(event: HTMLSelectElement): void {
  console.log(event.value);
}

<select class="sort-select" #select (change)="applySort(select)">
  <option [value]="false" [attr.columnName]="'dateCreate'">+ to -</option>
  <option [value]="true" [attr.columnName]="'dateCreate'">- to +</option>
  <option [value]="false" [attr.columnName]="'title'">A to Z</option>
  <option [value]="true" [attr.columnName]="'title'">Z to A</option>
</select>

更清晰的解决方案是：

如果您只有一个字段，那么让我们使用[(ngModel)]来获取数据。

selected: boolean;

constructor() {}

<select class="sort-select" [(ngModel)]="selected">
  <option [value]="false" [attr.columnName]="'dateCreate'">+ to -</option>
  <option [value]="true" [attr.columnName]="'dateCreate'">- to +</option>
  <option [value]="false" [attr.columnName]="'title'">A to Z</option>
  <option [value]="true" [attr.columnName]="'title'">Z to A</option>
</select>
<pre>{{ selected | json }}</pre> <!-- true or false -->

如果你有很多字段，那么你应该实现一个FormGroup：

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    sort: [null, Validators.required]
  });
}

<form [formGroup]="form">
  <select class="sort-select" formControlName="sort">
    <option [value]="false" [attr.columnName]="'dateCreate'">+ to -</option>
    <option [value]="true" [attr.columnName]="'dateCreate'">- to +</option>
    <option [value]="false" [attr.columnName]="'title'">A to Z</option>
    <option [value]="true" [attr.columnName]="'title'">Z to A</option>
  </select>
</form>
{{ form.value | json }} <!-- { "sort": false } -->