0

当用户从选项下拉列表中加载不同的选择（对象）时，我想获得在（更改）函数中返回的新对象。但是，即使选择正确更改，它每次都返回默认对象。使用 $scope 时，这种类型的绑定在 AngularJs 中有效。不确定我的 Angular 11 ngModel 等是否正确。（我已经导入了 FormsModule）

组件.ts...

 public selectedQuery: any;


// default object...
 public myQueries: [{ 
 myQueryId: number, 
 myQueryCreatedDate: Date, 
 myQueryString: string 
 }] = [{
    myQueryId: 0,
    myQueryCreatedDate: new Date(),
    myQueryString: "Please select a query"
  }]


dropDownListBuild(); // function builds correctly, loads myQueries array with options
...

this.selectedQuery = this.myQueries[0]; // gets set as default
...


onQueryChange(query: any) {
    console.log(this.selectedQuery + query); // not seeing any change happen
  }

组件.html...

<div class="selectClass">
    <select [(ngModel)]="selectedQuery" (change)="onQueryChange(selectedQuery)">
            <option *ngFor="let opt of myQueries" [ngValue]="selectedQuery"> {{opt.myQueryString}}</option>
     </select>       
</div>
4

1 回答 1

1

将您的 HTML 代码更改为以下内容：

<div class="selectClass">
  <select [(ngModel)]="selectedQuery" (ngModelChange)="onQueryChange($event)">
    <option *ngFor="let opt of myQueries" [ngValue]="opt">
      {{ opt.myQueryString }}
    </option>
  </select>
</div>

变化：

  1. 使用(ngModelChange)="onQueryChange($event)"而不是(change)=onQueryChange(selectedQuery)获取新查询 - 更多详细信息如下。
  2. 更改[ngValue]="selectedQuery"为[ngValue]="opt"- 以前的版本意味着您重复三次相同的查询作为值，您只是更改了显示的文本（因此每个选项都显示正确的显示文本，但值始终相同）。

有关更改事件的更多详细信息： (change)即使没有 Angular，也必然会触发更改事件，它只是经典的输入更改事件。您可以在没有 ngModel 的情况下使用它，但与 ngModel 一起使用并不能很好地工作，因为在更新 ngModel 之前会（或至少可能）触发此事件。

这就是为什么你应该使用 dedicated (ngModelChange)，它是指令的输出，ngModel所以它总是在模型 fromngModel改变后被触发。

顺便提一句。如果您不需要检测查询更改的时刻，而只需将正确的查询存储在selectedQuery属性中 - 只需应用第二个修复，您就可以删除ngModelChange.

于 2021-09-25T23:54:58.450 回答