Question

我有一个对象数组。

AFRAME.registerComponent('super', {  // Not working
schema: { 
Games: {type: 'array'}, 
jsonData: {
parse: JSON.parse,
stringify: JSON.stringify}
},
init: function () {
var el = this.el; 
el.setAttribute('super', 'jsonData', {src:"https://cdn.glitch.com/b031cbf1-dd2b-4a85-84d5-09fd0cb747ab%2Ftrivia.json?1514896425219"});
var hugeArray = ["Title", "Platform",...];   
const el.setAttribute('super', {Games: hugeArray}); 
el.setAttribute('position', {x:-2, y:2, z:-3}); 
} 
});

我重新排序sharedObjects以形成由完全相同的对象组成的略微不同的数组：

sharedObjects = [{id:1, name:"Tim"},{id:2, name:"Duncan"},{id:3, name:"James"}];

我这样做是通过删除第一个元素，将其存储在数组中，并将数组连接到所需的索引。

由于某种原因，GUI不会更新以反映此更改。我尝试使用sharedObjects = [{id:2, name:"Duncan"},{id:3, name:"James"},{id:1, name:"Tim"}];，但它没有触发任何内容。

如果我向数组添加一个新元素，删除一个元素并调用detectChanges（），那么

GUI更新，但只是重新排序同一个数组什么都不做。

我该如何解决这个问题？

Answer 1

根据official angular documentation，ngFor中的更改传播发生如下 -

添加项目时，会将新模板实例添加到DOM中。当
删除了一个项目，其模板实例将从DOM中删除。当
项目被重新排序，它们各自的模板在DOM中重新排序。

根据第三点，您的模板应根据重新排序自行更新。

分享您的代码可能有助于指出实际问题。

在Angular中重新排序模型数组时更新GUI

1 个答案: