如何解决我的角度渲染问题

Question

我有这个HTML，我想在数组中渲染所有项目，并且在某些项目更改时也对服务的更新做出反应（像“名称”一样更新）。

当我发送更新和服务返回array.slice（）时，问题出现了，似乎存在一些问题，因为我可以在数组中看到其他项目，而不是我最近更新的项目。组件和服务之间的通信类似。有三个组件：

1. 列表COMPONENT呈现数组。
2. 进行更新和编辑并将其发送到
3. 具有所有数组并进行CRUD操作的组件3 ServiceComponent。将更新的值发送到服务。

这是我的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>

文件：

  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());
    }

这是

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

.ts

Answer 1

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

第一种方法 - 只需在组件中添加更改eTectorRef。这样：

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名称”将是{对象对象}的键，而是“名称”是键。