Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 当主体在服务中发生变化时,重新加载组件中的列表_Angular_Observable_Behaviorsubject - Fatal编程技术网

Angular 当主体在服务中发生变化时,重新加载组件中的列表

Angular 当主体在服务中发生变化时,重新加载组件中的列表,angular,observable,behaviorsubject,Angular,Observable,Behaviorsubject,更改列表时,我想在我的组件中重新加载列表。此列表作为行为主题存储在服务中。我订阅了我的组件中的主题,该组件在表格中显示列表。当用户单击列表中的项目时,它会通过路由器打开一个视图。在这里,用户可以对该项目执行某些操作(删除、编辑/保存等),但当项目被删除时,它确实会在服务的原始列表中将其删除,但仍会在显示列表的组件中显示该项目。我认为如果进行了更改并重新加载列表,将检查行为主题,但它似乎不起作用 我的服务.ts: export class OfferService { offers: Offe

更改列表时,我想在我的
组件中重新加载列表。此列表作为
行为主题
存储在
服务
中。我订阅了我的组件中的主题,该组件在表格中显示列表。当用户单击列表中的项目时,它会通过
路由器打开一个视图。在这里,用户可以对该项目执行某些操作(删除、编辑/保存等),但当项目被删除时,它确实会在
服务的原始列表中将其删除,但仍会在显示列表的组件中显示该项目。我认为如果进行了更改并重新加载列表,将检查行为主题,但它似乎不起作用

我的
服务.ts

export class OfferService {
  offers: Offer[] = [];
  public offersSubject = new BehaviorSubject<Offer[]>(this.offers);

  constructor(private http: HttpClient) {
    this.generateRandomOffers();
   }

  private generateRandomOffers(): void {

    for (let i = 0; i < 8; i++) {
      let offer = new Offer(this.offersSubject.getValue().length + 1);
      offer = Offer.createRandomOffer();
      this.offersSubject.getValue().push(offer);
    }

  }

  public FindAll(): Offer[] {
    return this.offersSubject.getValue();
  }

  // observable of offers list
  public getAll(): Observable<Offer[]> {
    return of(this.offersSubject.getValue());
  }


  public FindById(offerId: number): Offer {
    return this.offersSubject.getValue().find(o => o.id === offerId);
  }

  public Save(offer: Offer): Offer {
    let offerExist = false;
    const index = this.offersSubject.getValue().findIndex(o => o.id === offer.id);

    this.offersSubject.getValue().forEach( element => {
      if (element.id === offer.id)
      {
        element = offer;
        offerExist = true;
        this.offersSubject.getValue()[index] = element;
      }
    });

    if (!offerExist)
    {
      this.offersSubject.getValue().push(offer);
    }
    return this.offersSubject.getValue().find(o => o.id === offer.id);
  }

  public DeleteById(offerId: number): Offer {
    const deleteOffer = this.offersSubject.getValue().find(o => o.id === offerId);
    this.offers = this.offersSubject.getValue().filter(o => o.id !== offerId);
    this.offersSubject.next(this.offers);
    return deleteOffer;
  }

  public AddOffer(): void {
    let offer = new Offer(this.offers.length + 1);
    offer = Offer.createRandomOffer();
    this.offersSubject.getValue().push(offer);
  }
}

要从流中连续接收数据,您需要提供相同的引用。在service getOffer方法中,需要返回
this.offersSubject.asObservable()这是同一流的只读部分。当您想更新流时,就调用源流上的next。我已经创建了一些简单的!:)

谢谢你的帮助,我在我的应用程序中修复了它。谢谢。演示让我真正理解了它!
selectOfferViaRouter = false;
  offers: Offer[] = [];
  selectedOfferId = -1;
  trigger: any;

  constructor(
    private offerService: OfferService,
    private router: Router,
    private activatedRoute: ActivatedRoute) { }

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

  ngOnChanges(): void {
    this.getAllOffers();
  }

  // get all offers on observable
  getAllOffers(): void {
    this.offerService.getAll().subscribe(data => {
      this.offers = data;
    });
  }

  // to update the table of offers
  detectTrigger(event: Event): void {
    this.getAllOffers();
    console.log(this.offers);
  }

  selectOffer(id: number): void {
    this.router.navigate([id], {relativeTo: this.activatedRoute});
  }


  addOffer(): void{
    this.offerService.AddOffer();
  }