Angular2 @Input 和 http.get

Question

我在将数据从一个组件传递到另一个组件时遗漏了一些东西。我使用@Input 来传递数据，这些数据是我从http.get 请求中获得的。问题是，在请求尚未解决的情况下，我尝试从传递的输入访问属性时出错。

//news.ts
import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Pagination} from './pagination';

@Component({
    selector: 'news',
    templateUrl: 'app/news.html',
    viewProviders: [HTTP_PROVIDERS],
    directives: [Pagination]
})
export class News {

    news = [];

    pagination: Pagination;

    constructor(http: Http) {
        http.get('http://test.com/data')
            .map(res => res.json())
            .subscribe(news => this.news = news);
    }
}

//pagination.ts
import {Component, Input} from 'angular2/core';

@Component({
    selector: 'pagination',
    templateUrl: 'app/pagination.html'
})
export class Pagination {
    // page: int = 1;

    @Input() config;

    constructor() {
        // this.page = this.config.number;
    }
}

//Pagination.html
Page {{config.total}}

config.total 在加载时生成错误。但是执行 {{config}} 似乎可行。

有什么想法吗？

谢谢

Answer 1

有两种解决方法：

您可以在 pagination.html

中使用 Elvis 运算符

Page {{config?.total}}

这来自 Angular 文档：

Elvis 运算符 (?) 表示雇主字段是可选的，如果未定义，应忽略表达式的其余部分。

第二种解决方案是使用异步管道： https://angular.io/docs/ts/latest/api/common/AsyncPipe-class.html

在这种情况下，您需要重写代码。

Answer 2

用@Input()修饰的变量在构造函数中不可用。您必须等到 Angular 解析绑定并稍后在 component's lifecycle:

中访问它

ngOnInit() {
    this.page = this.config.number;
}

Answer 3

@Vlado Tesanovic 我刚刚尝试了第二种解决方案，因为我可能需要在构造函数中处理数据。我做了什么：

//news.ts
    constructor(http: Http) {
        // http.get('http://lechiffonbleu.com:1337/news/test')
        //  .map(res => res.json())
        //  .subscribe(news => this.news = news);

        this.news = new Promise((resolve, reject) => {
            resolve = http.get('http://lechiffonbleu.com:1337/news/test')
                .map(res => res.json())
                .subscribe(news => this.news = news);

            console.log(this.news);
            console.log(resolve);
        });
    }

好吧，我不知道如何正确解决承诺，所以它不会在 pagination.ts

中的@input 中引发错误

Angular2 @Input 和 http.get

Angular2 @Input and http.get

components

input

angular-http

angular