Question

我在显示列表的同一页面上删除了操作。当我执行删除时，api中的数据发生了变化，但它没有反映在列表本身中。

我尝试了一些事情，就是将已删除的对象从可观察数组中拉出来。这不起作用，这不是我想要的，因为它不会反映其他用户是否添加或删除了＃34; people＆＃34;从列表中。

现在唯一有效的方法是在删除操作完成后触发api调用，但效率不高。

在我看来，正确的方法是触发或刷新订阅，以便它返回到api获取新数据并添加新数据或将数据库中不存在的数据移除到可观察数组。 / p>

有没有办法用observable和RxJs来做？

谢谢你的帮助

＆＃13;

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';

import {PeopleService} from '../shared/people.service';
import {People} from '../shared/people.model';
import {ToastService} from '../../../core/toast/toast.service';

@Component({
  selector: 'app-people-list',
  templateUrl: './people-list.component.html',
  styleUrls: ['./people-list.component.css']
})
export class PeopleListComponent implements OnInit {

  peoples: Observable<People[]>;
  constructor(private peopleService: PeopleService,
  private toastService: ToastService) { }

  getPeoples() {
    this.peoples = this.peopleService.getPeoples()
  }

  deletePeople(people: People) {
    this.peopleService.deletePeople(people)
    .subscribe(
      () => {
        this.toastService.activate(' Deleted', 'People', 'danger');
      },
      (err) => console.log('Debug:deletefailed', err)
    );
  }

  ngOnInit() {
    this.getPeoples();
  }

}

＆＃13;

<div>
  <h3>People List</h3>
  <hr/>
  <a href="" [routerLink]="['/peoples', 'new']"><button class="btn btn-primary">Add People</button></a>
  <table class="table table-hover">
    <thead class="thead-inverse">
      <tr>
        <th>Id</th>        
        <th>Number of People</th>
        <th>Modify</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let people of peoples | async">
        <th>{{people.id}}</th>
        <td>{{people.purchaseCount}}</td>
        <td><button href="#" [routerLink]="['/peopleDetail', people.id]" class="btn btn-sm btn-info">Edit/Detail</button></td>
        <td><button (click) = "deletePeople(people)" class="btn btn-sm btn-danger">Delete</button></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

如果我理解正确，你有一个可观察的服务要删除，然后想要刷新另一个调用observable的方法。这里的问题是一个可观察的异步。以下代码显示了如何通过使用finally调用来刷新数据来完成类似的任务。这又会在第一次异步调用结束时再次调用服务来刷新数据。

delete(item: any) {

    if (confirm("Are you sure you wish to delete Lease ' " + item.title + " '")) {
        this.service.delete(item.leaseid)
            .finally(()=> {this.getLeases();})
            .subscribe(
            res => {
                this.alertService.success("Lease Has been Deleted");
            },
            err => {
                this.handleError(err);
            }
            )

    }
}

Answer 2

如果你想对它们进行操作，将人们列表作为流是没有意义的。

export class PeopleListComponent implements OnInit {

  peoples: People[];
  constructor(private peopleService: PeopleService,
  private toastService: ToastService) { }

  deletePeople(people: People) {
    this.peopleService.deletePeople(people)
    .subscribe(
      () => {
        this.toastService.activate(' Deleted', 'People', 'danger');

       //***Remove people from the peoples list here**//

      },
      (err) => console.log('Debug:deletefailed', err)
    );
  }

  ngOnInit() {
    this.getPeoples().subscribe(peoples => this.peoples = peoples);
  }

}

...

<tr *ngFor="let people of peoples">

将回复重新绑定到people-list并不会产生任何低效率，因为无论如何都必须更新视图。

视图不更新的原因仅仅是因为没有任何新值被推送到它

Answer 3

正如您所说，您始终可以从数据库中获取新数据并更新列表。但唯一的问题是你必须向API发出另一个请求，这似乎是不必要的。

来到你的观点

它返回到api获取新数据并添加新数据或将数据库中不存在的数据移除到可观察数组。

为什么不在删除订阅中执行getPeoples（）。

    deletePeople(people: People) {
        this.peopleService.deletePeople(people)
        .subscribe(
          (success) => {
            this.toastService.activate(' Deleted', 'People', 'danger');
            this.getPeoples();
          },
          (err) => console.log('Debug:deletefailed', err)
        );
    }

Answer 4

如果我理解正确，问题不在更新body本身？如果是Nicolas的回答会有所帮助......虽然我建议不要将数组的指针改为最佳实践。而不是：

Component

执行：

peoples: Observable<People[]>;    
getPeoples() {
    this.peoples = this.peopleService.getPeoples()
}

如果您正在寻找跨用户的实时更新，您可以创建自助刷新服务 - 尽管这会增加API调用，这将不可避免地使用户付出代价。

peoples: Array<People> = [];
getPeoples() {
    this.peoples.length = 0;
    this.peoples.push(...this.peopleService.getPeoples());
}

请在此处查看详细说明：Realtime Refresh

此外，您还应该看一些为此类内容构建的框架，例如Fireloop.io。

在api上执行编辑或删除操作后，Angular 2视图不会更新

4 个答案: