0
角度材料2アプリケーションでサーバからデータを取得しようとしていますが、サーバからデータをロードしていない可能性があります。これは私のデータをテーブルにロードしていません。角材2テーブルサーバからデータを取得
userComponent.ts
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent {
displayedColumns = ['id', 'firstName', 'lastName', 'email'];
dataSource: UserDataSource;
constructor(private userSrvc: UserService) { }
ngOnInit() {
this.dataSource = new UserDataSource(this.userSrvc);
}
logPage(length) {
console.log(length);
}
}
export class UserDataSource extends DataSource<User> {
userSrvc: any;
length = 20;
data: Observable<User[]>;
/** Connect function called by the table to retrieve one stream containing the data to render. */
constructor(userService) {
super();
this.userSrvc = userService;
}
connect(): Observable<User[]> {
this.userSrvc.get().subscribe(users => {
this.data = users;
})
return this.data;
}
disconnect() { }
}
私はそれがコンソールログに私にエラーを与えるconnectメソッドの内部で返すようにしよう。
ここは私のです。UserService.tsここで私はデータを取得するためにユーザーapiを呼び出しています。
@Injectable()
export class UserService {
constructor(private http: Http) { }
get(): Observable<User[]> {
let header: Headers = new Headers({ 'Content-Type': 'application/json' });
let options: RequestOptions = new RequestOptions({ headers: header });
return this.http.get(`${BASE_URL}user/get/`, options)
.map((response: Response) => {
return <User[]>response.json();
}).catch(this.errorHandler);
}
errorHandler(error: Response) {
return Observable.throw(`Error Message: ${error.statusText}`);
}
}