所选项目不更改
所选项目不更改
提问于 2021-01-02 20:06:29
使用新创建的Angular 11项目。
app.component.html
<div *ngFor="let i of getItems()">
<select (change)="onSelectionChange($event.target.value)">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>app.component.ts
export class AppComponent {
getItems(): any[] {
return [{a: 1}, {a: 2}, {a: 3}, {a: 4}];
}
onSelectionChange(event) {
console.log(event);
}
}一切似乎都很好。四个选择框可见，每个框在下拉列表中都有一个空值和四个整数。奇怪的是，当我打开一个下拉列表并单击以选择一个值时，onSelectionChanged()事件会被触发，但select中的选定值不会改变。
如果我将getItems()方法更改为返回普通数字而不是对象，则选择组件将按预期开始工作，如下所示：
getItems(): any[] {
return [1, 2, 3, 4];
}此外，我还获得了从HTML标记中删除(change)事件的正确行为(在这种情况下，该事件不会被触发)。
我正在使用这些依赖项
"dependencies": {
"@angular/animations": "~11.0.1",
"@angular/common": "~11.0.1",
"@angular/compiler": "~11.0.1",
"@angular/core": "~11.0.1",
"@angular/forms": "~11.0.1",
"@angular/platform-browser": "~11.0.1",
"@angular/platform-browser-dynamic": "~11.0.1",
"@angular/router": "~11.0.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}回答 4
Stack Overflow用户
回答已采纳
发布于 2021-01-02 21:31:42
使用trackBy解决问题。每次触发更改检测时，angular都会重新呈现整个模板，并始终将i计算为第一个对象。
.html
<div>
<select (change)="onSelectionChange ($event.target)">
<option *ngFor="let i of getItems(); trackBy:identify"
value="{{i.value}}">{{i.label}}</option>
</select>
</div>.ts
identify(index, item) {
return item.label;
}Stack Overflow用户
发布于 2021-01-02 20:49:46
您尚未为所选选项指定任何值。我调试并观察$event.target.value的值，我想它应该是空的。
尝试使用属性指定选项的值。来自here的示例
<mat-form-field appearance="fill">
<mat-label>Cars</mat-label>
<select matNativeControl required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</mat-form-field>Stack Overflow用户
发布于 2021-01-02 21:54:45
我们调用一个方法来获取项，每次我们调用它时，它都会返回一个新的对象数组。由于它是一个新对象，我们不知道它是相同的值还是不同的值。在原始值数组的原因中，情况并非如此，这就是它工作的原因。我们可以用一个trackBy函数来处理这个问题，告诉ngFor如何识别它的条目，如下所示。
trackByItem = (index: number, item: any) => item.a;<div *ngFor="let i of getItems();trackBy:trackByItem">
...
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65538907
复制相关文章
相似问题
腾讯云开发者
