角度4,5中的组件绑定

Question

我在hello.component.ts中有这个 当我从组件调用服务并在http请求时检查组件中的数据绑定时，我在测试中遇到了一些问题。下面是详细代码。 版本角5。

import { Component, OnInit, Input, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../http-service.service';
import { Constants } from '../constants';
@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private httpService: HttpService,
private location: Location,
public dialog: MatDialog
) { }
albumList = [];
photoList = [];
isDisabled = true;
selectedAlbumsHash = {};
dataSource = null;
displayedColumns = ['id', 'title'];
selectedAlbums = [];
ngOnInit(): void {
 this.route.params.subscribe(params => this.getAlbumDetails(params));    
}
getAlbumDetails(params) {
 let id = parseInt(params.id);
 this.httpService.get(Constants.ALBUM_URL).subscribe(
  data => {
    this.albumList = data.filter(
      (album) => {
       return album.userId === id;
      }
    );
   }
  );
 }
}

并在spec文件中

    import { TestBed, async,inject, fakeAsync, ComponentFixture } from '@angular/core/testing';
    import { DashboardComponent } from './dashboard.component'
    import { MatDialogModule, MatDialog, MatGridListModule, MatCheckbox } from '@angular/material';
    import { MatTableDataSource } from '@angular/material/table';
    import { TestsModule } from '../shared/modules/tests.module';
    import { Observable } from 'rxjs/Observable';
    import { ActivatedRoute, Params } from '@angular/router';
    import { HttpService } from '../http-service.service';
    import { Constants } from '../constants';
    import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
    import {
      RouterTestingModule
    } from '@angular/router/testing';
    describe('AppComponent', () => {
      let fixture;
      let app;
      let component;
      let data = [
        {
          "userId": 1,
          "id": 1,
          "title": "quidem molestiae enim"
        },
        {
          "userId": 1,
          "id": 2,
          "title": "sunt qui excepturi placeat culpa"
        },
        {
          "userId": 1,
          "id": 3,
          "title": "omnis laborum odio"
        },
        {
          "userId": 1,
          "id": 4,
          "title": "non esse culpa molestiae omnis sed optio"
        },
        {
          "userId": 1,
          "id": 5,
          "title": "eaque aut omnis a"
        },
        {
          "userId": 1,
          "id": 6,
          "title": "natus impedit quibusdam illo est"
        },
        {
          "userId": 1,
          "id": 7,
          "title": "quibusdam autem aliquid et et quia"
        },
        {
          "userId": 1,
          "id": 8,
          "title": "qui fuga est a eum"
        },
        {
          "userId": 1,
          "id": 9,
          "title": "saepe unde necessitatibus rem"
        },
        {
          "userId": 1,
          "id": 10,
          "title": "distinctio laborum qui"
        },
        {
          "userId": 2,
          "id": 11,
          "title": "quam nostrum impedit mollitia quod et dolor"
        },
        {
          "userId": 2,
          "id": 12,
          "title": "consequatur autem doloribus natus consectetur"
        }
      ];
      const two = 2;
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [
            DashboardComponent
          ],
          imports: [
            TestsModule,
            HttpClientModule,
            HttpClientTestingModule],
          providers: [
            { provide: MatDialog, useValue: { close: () => {} },
          },
          {
            provide: ActivatedRoute,
            useValue: {
              params: {
                subscribe: (fn: (value: Params) => void) => fn({
                    id: two,
                }),
            },
            },
        },
            HttpService
          ],
          schemas: [CUSTOM_ELEMENTS_SCHEMA] 
        }).compileComponents();
        fixture = TestBed.createComponent(DashboardComponent);
        component = fixture.debugElement.componentInstance;
      }));
      afterEach(inject([HttpTestingController], (backend: HttpTestingController) => {
        backend.verify();
      }));

      it('intialize', async(() => {
        let spy = spyOn(component, 'getAlbumDetails');
        component.ngOnInit();
        expect(spy).toHaveBeenCalled();
      }));
      it(`should return data`, async(inject([HttpService, HttpTestingController],
        (service: HttpService, backend: HttpTestingController) => {
          component.ngOnInit();
          service.get('https://jsonplaceholder.typicode.com/albums').subscribe(albumData => {
            expect(albumData.length).toEqual(100);
            expect(albumData).toEqual(data);
          });    
          const req = backend.expectOne('https://jsonplaceholder.typicode.com/albums');
          expect(req.request.method).toBe("GET");
          req.flush(data);
       })));
    });

一切都很好但只有我在下面遇到问题：

1。如何在spec文件中检查this.albumList

我也和spy一起检查了但是它没有解决问题。

由于