angular 6 Невозможно повторить массив в компоненте приложения при переходе с сервиса на событие нажатия - PullRequest
Новая
       57

angular 6 Невозможно повторить массив в компоненте приложения при переходе с сервиса на событие нажатия

0 голосов
/ 06 февраля 2020

Я новичок в angular, у меня есть элемент сообщения-тоста в компоненте приложения, теперь для каждого вызова службы из любого компонента я вызываю службу, чтобы показать и отправить сообщение в массив. теперь проблема в том, что компонент приложения не может повторить массив и обновить его значение при нажатии или удалении какого-либо объекта. Вот мой код: -

компонент приложения. html: - 

<div *ngFor="let toast of toastList">
    <div class="toast">
        <span class="close" (click)="closeToast($event)">&times;</span>
        <div class="loading">Loading data {{toastList.message}}<span>.</span><span>.</span><span>.</span></div>
    </div>
</div>

app component.ts: - 

ngOnInit() {
    this.subscription = this.commonService.addObject$.subscribe(toasterArray => this.toastList = toasterArray);
    console.log('subscription is : ' + this.subscription);
}

ngOnDestroy() {
    this.subscription && this.subscription.unsubscribe();
}

closeToast($event) {
    this.commonService.toggleToaster(false, null);
}

service.ts: - 

export class CommonService {
    private toastArray: any = [];
    private toasterArray: BehaviorSubject<any> = new BehaviorSubject<any>(this.toastArray);

    addObject$: Observable<number> = this.toasterArray.asObservable();

    constructor() {
    }

    toggleToaster = (action, message) => {
        if (action === true) {
            this.toastArray.push(message);
            this.toasterArray.next(this.toastArray);
        } else if (action === false) {
            this.toastArray = this.toastArray.filter(element => element.message !== message);
            this.toasterArray.next(this.toastArray);
        }

    }
    getToastArray = () => {
        return this.toastArray;
    }
}

component.ts для вызова службы, чтобы показать тост: - 

getPass() {
    this.membeService.getPass(this.page).subscribe(
        data => {
            let toaster = { "message": this.page.searchParams };
            this.commonService.toggleToaster(true, { 'message': 'get Passenger' });
        },
        err => {
            console.error(err);
        }
    )
};

Помогите мне

1 Ответ

0 голосов
/ 06 февраля 2020

У вас есть ngFor l oop с использованием переменной 'toast', но вы пытаетесь прочитать из 'toastList' в l oop. В ngFor измените на: 

    <div class="loading">Loading data {{toast.message}}<span>.</span><span>.</span>

Вместо toastList.message.

Пример работы StackBlitz на основе вашего кода:

Также вы возвращают тип числа здесь: addObject $: Observable = this.toasterArray.asObservable ();

Вполне может не иметь значения, но попробуйте изменить число на любое.

...