Angular 11，如何将模板中的新对象绑定到组件

Question

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

component.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
  }

component.html...

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

Answer 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" - 以前的版本意味着您重复三次相同的查询作为值，您只是更改了显示的文本（因此每个选项都显示正确的显示文本，但值始终相同）。

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

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

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