如何解决我的Angular DOM渲染问题

Question

我有这个HTML，我想在一个数组中呈现我的所有项目，并在一些项目更改时对服务的更新做出反应(部分更新如'name')。

当我发送更新并且服务返回array.slice()时，问题出现了，似乎有一些问题，因为我可以看到数组中的其他项目，但不是我最近更新的项目。组件和服务之间的通信是这样的。有三个组成部分:

1. listComponent渲染数组
2. editComponent，完成更新和编辑并将其发送给组件3
3. serviceComponent，它拥有所有数组并执行CRUD操作。将更新后的值发送给服务。

这是我的listComponent.html和它的。ts代码:

<div *ngFor="let item of items; let i = index">
<h4>{{item.heading}}</h4>
<p>{{item.details}}
<a [routerLink]="[i]"><span>Link here</span></a>
</p>
</div>

.ts文件:

ngOnInit(): void {
this.items = this.itemsService.getitems()
this.subscription = this.itemsService.itemChanged.subscribe((items : Item[]) => {
this.items = items;
})
}

下面是Service.ts的代码片段:

export class itemsService {
itemChanged = new Subject<Item[]>();
private items: Item[] = [
new Item(
'Heading-1',
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, dignissimos inventore, d.'
),
new Item(
'Heading-2',
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis')
]
getItems() {
return this.items.slice();
}
}
updateItem(index: number, newItem: Item) {
this.items[index] = newItem;
this.itemChanged.next(this.items.slice());
}

下面是editComponent.ts:

onSubmit() {
if (this.editMode){
console.log(this.editMode)
this.itemsService.updateItem(this.id, this.iForm.value);
} 
}

从参数中接收editComponent中的id。

Answer 1

有两种方法可以解决问题。实际上，这都是关于检测视图中的变化。

第一种方法-只需将ChangeDetectorRef添加到您的组件。这样的:

constructor(private cdRef: ChangeDetectorRef) {} 
ngOnInit(): void {
this.items = this.itemsService.getitems()
this.subscription = this.itemsService.itemChanged.subscribe((items : Item[]) => {
this.items = items;
this.cdRef.detectChanges();
})
}

但是正如上面评论中的标记-这不是最好的解决方案。最好是使用async管道，您可以这样做:

<div *ngFor="let item of items$ | async; let i = index">
...

和你的组件文件:

ngOnInit(): void {
this.items$ = this.itemsService.itemChanged.pipe(
startWith(this.itemsService.getitems()),
);
}

Answer 2

问题在于表单中的一些命名约定。例如。

<input name = 'name' ngModel name='itemName'>

在这里，我认为'ngModel name'将是{object object}的键，但'name'是键。