В угловом, когда я использую наблюдаемый метод подписки, чтобы получить данные из пользовательского API, он зацикливался / вызывал бесконечно

Question

Приведенный ниже код входит в бесконечный цикл

Я пытаюсь заполнить данные в таблицу угловых материалов, и служба угловых работает абсолютно нормально.

Я нашел эту проблему, просматривая журнал консоли (бесконечный цикл).

export class RosterDataSource extends DataSource<any> {

    dataFetch;
    data;

    constructor(private fetchDataService: FetchdataService) {
        super();
        console.log('data getting');
    }

    connect(): Observable<RosterShiftModel[]> {
        this.dataFetch = this.fetchDataService.getRosterTable().subscribe(data =>
        this.data = data
    );
        return this.data;
    }

    disconnect() {
        this.dataFetch.unsubscribe();
    }
}

В приведенном ниже коде метод подписки удален , и он работает нормально, выборка данных изсервер.

export class RosterDataSource extends DataSource<any> {
    dataSourceRoster;
    dataFetch;
    constructor(private fetchDataService: FetchdataService) {
        super();
    }

    connect(): Observable<RosterShiftModel[]> {
        return this.fetchDataService.getRosterTable();
    }

    disconnect() {
    }
}

Вот метод обслуживания

getRosterTable(): Observable<OptionsModel[]> {
    return this.http.get<OptionsModel[]>('/get/getrosterinfo');
}

Я хотел знать, что происходит за кулисами, и какэто исправить?