Question

将 json 值显示为角度输入@Input()

2020-01-25

1213

angular typescript

我在 app.component.html 中有这个模板：

<test [someInput]="data"></test>

'data' 是一个 json 对象属性，例如：

let data = {hello : "ciao"}

这是我的 test.component.ts：

从 '@angular/core' 导入 { Component, OnInit, Input }；

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {


  @Input()
  someInput:string

  constructor() { }


  ngOnInit() {

  }

}

这是我的 test.component.html 模板：

<p>{{someInput.hello}},test works!</p>

我认为 someInput 将被 'data' json 属性名替换，并且我的浏览器将显示“ciao”，但我不知道在哪里放置“let data ={hello:ciao} 的定义？

如果放置在 .ts 中，Chrome 控制台会给我一个错误：

TestComponent.html:1 ERROR TypeError: Cannot read property 'hello' of undefined
    at Object.eval [as updateRenderer] (TestComponent.html:1)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:45294)
    at checkAndUpdateView (core.js:44277)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callWithDebugContext (core.js:45632)

Answer 1

要将值作为 @Input 传递，您需要在 PARENT COMPONENT（使用 test.component 的组件）的 HTML 中执行此操作

它应该看起来像这样

<! -- some html here -->
<app-test [someInput]="helloData">

parent.component.ts

export class ParentComponent {
  helloData = {hello: 'ciao'}

  constructor() {}
}