angular.js - 关于http请求获取到的数据传输到子组件的问题

问题描述

问 题

在父级组件写了一个 http 请求获取到数据的方法

HttpClient 代码是这样的

然后视图把 this.data 传输到 GridComponent 组件，GridComponent 代码如下：

export class GridComponent implements OnInit {
  @Input() dataProvider; // @Input 用于接收父级组建属性
  @Input() columns: Object; // @Input 用于接收父级组建属性

  pagination;

  constructor() {
    console.log(this.dataProvider);
  }

  ngOnInit() {

    this.pagination = this.dataProvider._meta;
  }
}

然后现在浏览器报这样的错。

猜想是异步请求导致的错误，自己尝试 Google 解决，未果，所以来求助各位。谢谢。

解决方案

首先保证你网络请求是可以正确获取到数据，假如可以获取数据的话，在GridComponent中，使用一个输入属性的setter，以拦截父组件中值的变化，并采取行动，防守型编程，不会出错。
例子如下：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'name-child',
  template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
  private _name = '';
  @Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
   }
  get name(): string { return this._name; }
}

这篇关于angular.js - 关于http请求获取到的数据传输到子组件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！