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

Question

当用户从选项下拉列表中加载不同的selection（对象）时，我想在（更改）函数中获取返回的新对象。但是，即使 select 正确更改，它每次都会返回默认对象。使用 $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>

变化：

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

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

这就是为什么您应该使用专用 (ngModelChange) 的原因，它是 ngModel 指令的输出，因此它总是在 ngModel 的模型更改后触发。

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

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

Angular 11, how to bind a new object in template, to component

typescript

angular2-databinding

angular