@input 不适用于 Api 响应值 - 角度答案

【问题标题】：@input is not working for Api response value- angular@input 不适用于 Api 响应值 - 角度
【发布时间】：2020-07-19 03:03:12
【问题描述】：

我正在使用两个组件父组件和子组件，我想将值从父组件传递给子组件，我使用了@input 方法

------------------当我对值进行硬编码时--------- -------------------------

父组件

ts 文件

ngOnit(){
    this.name='JOB';
}

html 文件

<app-parent [name]='name'></app-parent>

子组件

@input name: any

ngOninit(){
   console.log(this.name)
}

----------------- 当我从 Api 传递值时-------- --------------------

父组件

ts 文件

ngOnit(){
    getMethod();
}

getMethod(){
    this.apiService.getAll(data)
      .subscribe(data => {
        if (data.success) {
            this.name=data.data.name
        }
      });
  }
}

html 文件

<app-parent [name]='name'></app-parent>

子组件

@input name: any

ngOninit(){
   console.log(name)
}

这里当控制台时，值为undefined

为什么它不起作用。有人可以帮助我吗？？

【问题讨论】：

不保证已经被ngOnInit设置，因为该值是异步设置的；使用ngOnChanges 关注@Input 的更新。

标签： angular6 angular5 angular7

【解决方案1】：

....

@Input name: any; // change the @Input decorator. You used a lowercase "i"

....

ngOninit(){
   console.log(this.name) // access the class property using "this"
}

【讨论】：

【解决方案2】：

如果您使用 I 大写的输入。试试这个 sn-p。

   @Input() set name(name: string) {
    if (name) {
        this._name= name;
    }
}

_name: 字符串

现在在 ngoninit 上控制台 this._name，即使它不起作用，你也必须使用下一个生命周期钩子（afterviewinit）。

这将使 name 成为一个属性并在每次更改时设置它。

谢谢

【讨论】：