当主题是服务Angular 10中的更改时，重新加载组件中的列表

Question

当对列表进行更改时，我想在component中重新加载列表。该列表被存储在CCD_ 2中作为CCD_。我订阅了我的组件中的主题，该组件在表中显示列表。当用户单击列表中的项目时，它会通过router打开一个视图。这是用户可以对此项目执行一些操作(删除、编辑/保存等(的地方，但当项目被删除时，它确实会将其删除到service中的原始列表中，但它仍然会在显示列表的组件中显示该项目。我认为如果做出更改并重新加载列表，行为主题将被检查，但它似乎不起作用。

我的service.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);
}
}

我的Component.ts(显示列表的位置(：

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

Answer 1

要连续从流中接收数据，需要提供相同的引用。在服务getOffer方法中，您需要返回this.offersSubject.asObservable();这是同一流的只读部分。当您想要更新流时，您可以调用源流上的next。我已经创建了一些简单的演示！：(