Angular 9在不刷新列表的情况下向列表添加新项目

我正在开发一个anglular应用程序，我可以说我是anglular的新手。在我的应用程序中，我通过httpclient将来自服务器的数据绑定到一个基本列表，如下所示。我在不同组件的列表中添加了一个新项。列表组件和添加新项目组件位于同一页面

我对绑定数据和添加新数据没有问题。我在添加新项目后遇到问题。在向列表的数据源添加新项后，整个组件得到刷新；但我不想这样，我想添加新元素而不刷新列表

简化代码在这里。 包含列表的我的组件：

 export class GroupSetupComponent implements OnInit {
  dataSet$: Observable<Group[]>;

  constructor (private groupService : GroupService) {}

  ngOnInit(): void {
    this.getGroups();
  } 

  getGroups() {
    this.dataSet$ = this.groupService.getGroups();
  }

  refreshGroupList(group: Group) {
    if(group) {
      // I have tried getting all list from database again
      // this.getGroups();

      // than I tried to add new item to existing observable array
      this.dataSet$ = this.dataSet$.
      pipe(
        map(data =>
          {
            data.push(group);
            return dataSet;
          }));
    }
  }
}

导出类GroupSetupComponent实现OnInit{
数据集$：可观察；
构造函数（私有组服务：组服务）{}
ngOnInit（）：void{
这是getGroups（）；
} 
getGroups（）{
this.dataSet$=this.groupService.getGroups（）；
}
刷新组列表（组：组）{
国际单项体育联合会（小组）{
//我再次尝试从数据库中获取所有列表
//这是getGroups（）；
//然后我尝试将新项添加到现有的可观察数组中
this.dataSet$=this.dataSet$。
烟斗(
地图（数据=>
{
数据推送（组）；
返回数据集；
}));
}
}
}

和组件模板：

<div *ngIf="dataSet$ | async as resultSet;">
<mat-card>
    <mat-card-content>
        <mat-selection-list>
            <mat-list-option *ngFor="let item of resultSet;" [value]="item.id" [disableRipple]="true">
                {{item.name}}
            </mat-list-option>
        </mat-selection-list>
    </mat-card-content>
</mat-card></div>

{{item.name}

在将新项添加到数据库并从api获取成功消息后，refreshGroupList函数将从子组件触发

---

我想问，我现在的做法对不对？如果不是，在列表上执行此类crud操作的有效方法是什么

您可以设置组件

更改检测：OnPush

并使用ChangeDetectionRef服务和方法

markToCheck（）

手动告知何时应刷新组件

您可以设置组件

更改检测：OnPush

并使用ChangeDetectionRef服务和方法

markToCheck（）

手动告知何时应刷新组件

您可以将其添加到组件中

   byId(index, item) {
      return item.id;
   }

并修改ngFor

<mat-list-option *ngFor="let item of resultSet; trackBy: byId" [value]="item.id" [disableRipple]="true">
                {{item.name}}
            </mat-list-option>

---

您可以将其添加到组件中

   byId(index, item) {
      return item.id;
   }

并修改ngFor

<mat-list-option *ngFor="let item of resultSet; trackBy: byId" [value]="item.id" [disableRipple]="true">
                {{item.name}}
            </mat-list-option>

---

也许你想用trackBy？请参阅本文：也许您想使用trackBy？看这篇文章：谢谢你的回答，我想这就是重点；但不幸的是，在添加新项目后，它仍在刷新列表。使用异步管道和可观察效果有什么作用吗？dataSet$是我真正的数据源，我正在向该属性添加项，而不是resultSet。这种效果如何？dataSet$有时返回falsy，还是总是生成项目？理论上，它不应该受到*ngIf的影响，除非它从假到真，从真到假等等。我不这么认为，它从假到真。在refreshGroupList函数中一切正常吗？我基本上只是在当前列表中添加了一个新项目。你的refreshGroupList不是一个理想的解决方案，但它仍然不会导致整个列表刷新。你可以尝试行为主体的实施谢谢你的回答，我认为这就是重点；但不幸的是，在添加新项目后，它仍在刷新列表。使用异步管道和可观察效果有什么作用吗？dataSet$是我真正的数据源，我正在向该属性添加项，而不是resultSet。这种效果如何？dataSet$有时返回falsy，还是总是生成项目？理论上，它不应该受到*ngIf的影响，除非它从假到真，从真到假等等。我不这么认为，它从假到真。在refreshGroupList函数中一切正常吗？我基本上只是在当前列表中添加了一个新项目。你的refreshGroupList不是一个理想的解决方案，但它仍然不会导致整个列表刷新。您可以尝试行为主题实现