在Angular 8中使用@Input的问题

哥谭M

我正在做我的第一个有角项目,而我的home组件html如下所示

<div class="container">
  <div>
    <div class="col-md-4">
      <h1 id="tableLabel">Latest</h1>
      <news-item [section]="Latest"></news-item>
    </div>
    <div class="col-md-4">
      <h1 id="tableLabel">STEM Stuff</h1>
      <news-item [section]="STEM"></news-item>
    </div>
  </div>
</div>

和新闻项目的ts如下

import { Component, Inject, Input } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'news-item',
    templateUrl: './news-item.component.html',
})

export class NewsItemComponent {

    public newsitems: NewsItem[];

    @Input() section: string;

    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

            http.get<NewsItem[]>(baseUrl + 'newsitems/GetNewsItemsBySection/' + this.section).subscribe(result => {

                this.newsitems = result;

            }, error => console.error(error));
    }
}

我得到this.sectionundefined构造函数中。我想念什么?

阿德里塔·沙玛(Adrita Sharma)

尝试在ngOnInit()ngOnChanges()

和构造函数之间的区别ngOnInitngOnInit生命周期挂钩在构造函数之后运行。输入初始值在构造函数中不可用,但在ngOnInit

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Angular 8中使用console.log?

来自分类Dev

在Angular 8中使用共享组件进行延迟加载

来自分类Dev

在angular 8中使用Async变得不确定

来自分类Dev

在 Angular 6 中使用 Observable 的问题

来自分类Dev

在 Angular 中使用异步/等待函数的问题

来自分类Dev

在 Angular 2 中使用 @Input 属性

来自分类Dev

api显示列表中的Angular 8问题

来自分类Dev

如何在angular2中使用FormControl从INPUT标签中获取逗号分隔值?

来自分类Dev

在Angular2中使用PhoneGap,加载模板时出现问题

来自分类Dev

在Angular 8中使用相同的ngModel属性在多个文本框中绑定不同的值

来自分类Dev

在Angular 8中使用Redux在1个效果中返回2个动作

来自分类Dev

在Angular2中使用@input属性更新NgIf值

来自分类Dev

在angular 8中使用ngModel和ngModelOption进行表单验证

来自分类Dev

多个模板引用在Angular 8中使用@ ViewChild不起作用

来自分类Dev

如何在index.html angular 8中使用* ngIf

来自分类Dev

如何在Angular 8中使用Change事件更改数据

来自分类Dev

在Angular8中使用管道和HttpService时简化API调用

来自分类Dev

如何在Angular 8中使用对象模拟数组数据以进行单元测试

来自分类Dev

在Angular应用中使用Jasmine测试SignalR的问题

来自分类Dev

如何在Angular 8中使用angular-oauth2-oidc实现身份验证代码流

来自分类Dev

在angular2中使用requestAnimationFrame

来自分类Dev

在Angular 1.2中使用ngMessages

来自分类Dev

在HTML5中使用Angular

来自分类Dev

在Angular 2中使用CanActivate的NoProviderError

来自分类Dev

在Angular 9中使用内部链接

来自分类Dev

在Angular 10中使用ICE

来自分类Dev

在HTML5中使用Angular

来自分类Dev

在Angular 2中使用routerLink

来自分类Dev

在 Angular 中使用 NgModule 中的类

Related 相关文章

  1. 1

    如何在Angular 8中使用console.log?

  2. 2

    在Angular 8中使用共享组件进行延迟加载

  3. 3

    在angular 8中使用Async变得不确定

  4. 4

    在 Angular 6 中使用 Observable 的问题

  5. 5

    在 Angular 中使用异步/等待函数的问题

  6. 6

    在 Angular 2 中使用 @Input 属性

  7. 7

    api显示列表中的Angular 8问题

  8. 8

    如何在angular2中使用FormControl从INPUT标签中获取逗号分隔值?

  9. 9

    在Angular2中使用PhoneGap,加载模板时出现问题

  10. 10

    在Angular 8中使用相同的ngModel属性在多个文本框中绑定不同的值

  11. 11

    在Angular 8中使用Redux在1个效果中返回2个动作

  12. 12

    在Angular2中使用@input属性更新NgIf值

  13. 13

    在angular 8中使用ngModel和ngModelOption进行表单验证

  14. 14

    多个模板引用在Angular 8中使用@ ViewChild不起作用

  15. 15

    如何在index.html angular 8中使用* ngIf

  16. 16

    如何在Angular 8中使用Change事件更改数据

  17. 17

    在Angular8中使用管道和HttpService时简化API调用

  18. 18

    如何在Angular 8中使用对象模拟数组数据以进行单元测试

  19. 19

    在Angular应用中使用Jasmine测试SignalR的问题

  20. 20

    如何在Angular 8中使用angular-oauth2-oidc实现身份验证代码流

  21. 21

    在angular2中使用requestAnimationFrame

  22. 22

    在Angular 1.2中使用ngMessages

  23. 23

    在HTML5中使用Angular

  24. 24

    在Angular 2中使用CanActivate的NoProviderError

  25. 25

    在Angular 9中使用内部链接

  26. 26

    在Angular 10中使用ICE

  27. 27

    在HTML5中使用Angular

  28. 28

    在Angular 2中使用routerLink

  29. 29

    在 Angular 中使用 NgModule 中的类

热门标签

归档