使用 @Input 装饰器访问传递的数据

2024-02-02

我有一个看起来像这样的子组件

子组件

@Component({
   selector: 'child-component',
   //TemplateUrl, Styles and Providers
})

export Class ChildComponent implements OnInit{
  @Input()
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  //A bunch of methods to work with the array I get
}

父组件

@Component({
   selector: 'parent-component',
   template: '<div>
                <child-component [arrayToGet]="models"></child-component>
              </div>',
   //A bunch of Styles and Providers
})

export class ParentComponent{
   models;

   constructor(......){}

   ngOnInit(){
      //Get an array from a service assign to this.models;
   }
}  

问题是我无法执行任何操作arrayToGet在我的里面ChildComponent。但是我可以使用这些属性arrayToGet在我的里面ChildComponent的 HTML。

有什么想法吗?


每当尝试从以下位置传递数据时parent to child using @Input装饰器和传递数据当时不可用child初始化,更好用setter,而不是直接绑定到变量中child成分。使用setter每当父组件中的数据更新时,都会更新子组件变量。

export Class ChildComponent implements OnInit{
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  @Input('arrayToGet')
  set _arrayToGet(data: Array) {
     this.arrayToGet = data;
     console.log(this.arrayToGet);
  }

  //A bunch of methods to work with the array I get
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 @Input 装饰器访问传递的数据 的相关文章

  • ngrx 存储是否持久?

    ngrx 存储是否持久 换句话说 我们可以关闭浏览器重新打开它 并检索添加到ngrx 商店 https github com ngrx platform 目前 ngrx store 不支持此类功能 但是您可以通过使用类似的库来维护状态ngr
  • 如何测试包含自定义表单控件的组件?

    我有一个这样的组件 Component selector app custom form control templateUrl
  • 如何使用 Angular 2 动画实现翻转效果?

    我一直在我的项目中使用纯CSS翻转卡片 但这个解决方案不是合适的 有人可以通过点击按钮来呈现角度 2 的翻转吗 我在 angularjs 中找到了一个https codepen io Zbeyer pen oXQrZg https code
  • 在停止调试时终止 VS Code 中的 ng 服务任务

    我有一个 Angular 项目 目前正在通过 chrome 调试器在 vs code 内进行调试 我的launch json uses preLaunchTask serve 其中服务定义于tasks json as ng serve 这样
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • Angular - 为每个请求设置标头

    我需要在用户登录后为每个后续请求设置一些授权标头 要为特定请求设置标头 import Headers from angular2 http var headers new Headers headers append headerName
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的
  • Angular 2+ 源代码中的 ɵ(类似 Theta)符号

    在深入研究 Angular 4 3 源代码后 我经常遇到 符号 例如 在异步管道源 https github com angular angular blob 4 3 2 packages common src pipes async pi
  • Angular Material 7 多重选择 - 设置选定值

    我正在尝试设置多选下拉列表的选定值 如下所示 循环根据条件选择多个复选框并进行设置 document getElementsByTagName mat pseudo checkbox index classList add mat pseu
  • Angular 2:基于环境导入服务

    根据 Angular CLI 项目中的当前环境导入服务的最佳 正确方法是什么 我已经设置了一个名为 dev mock 的新环境 我可以使用它来调用 ng serve environment mock 然后我使用 useClass 在模块中设
  • 如何在ionic 2中创建覆盖页面?

    当我进入新页面时如何创建透明的引导覆盖页面 我如何在 ionic 2 中实现 您可以在外部创建 div
  • 如何更改 Angular Material 选择中的滚动条样式?

    我们需要帮助来更改 Angular Material 的 Select 组件中的滚动条 实现了以下演示 https stackblitz com angular bxbvndrpogl file app 2Fselect reset exa
  • 原生元素聚焦功能不起作用

    我试图通过单击按钮自动聚焦在输入元素上 请参阅打字稿 ViewChild envFilter envFilter ElementRef onFilterSelect this envFilter nativeElement focus 在
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo
  • 如何将窗口注入到服务中?

    我正在用 TypeScript 编写一个 Angular 2 服务 它将利用localstorage 我想注入对浏览器的引用window对象到我的服务中 因为我不想引用任何全局变量 例如 Angular 1 x window 我怎么做 这目
  • Angular2 - 在反应表单上设置日期字段

    我有一个使用两个日期字段的组件 开始日期和结束日期 默认情况下 我禁用了结束日期字段 当他们选择开始日期时我会切换它 this transitionForm this fb group effectiveEndDate value disa
  • Angular 7:ng 测试挂起,不断重复运行测试

    我最近将 Angular 6 应用程序迁移到角7 my 包 json看起来像这样 name myApp version 3 0 0 license MIT scripts ng ng start ng serve public host h
  • Angular - 如何解析 event.path 内的对象

    现在这是一个很难解释的复杂问题 我会尽力解释 我有一个弹出窗口 我想从中唯一地标识单击事件是来自弹出窗口内部还是外部 我的第一个方法 我用一个包住了整个弹出框div与id 说 独特 因此 我将单击事件与主机侦听器绑定 我将为其获取事件对象
  • 在业力测试中按类名获取两个div(Angular 4.0)

    我有这样的看法 div div class header title Example title 1 div div div div class header title Example title 2 div div 在我的业力测试中 我
  • angularfire 2:错误“未处理的承诺拒绝:TypeError:无法读取属性”

    我尝试了一个示例应用程序来连接到 Firebase 在我的 Main ts 中我这样写 import bootstrap from angular platform browser dynamic import enableProdMode

随机推荐