Question

我是angular2的新手并试图做一件非常简单的事情。我有一个本地json文件，我通过http.get访问它以使用服务获取数据。此服务返回一个数据列表，我想从中访问一个对象并在屏幕上呈现。我不想使用ngFor，因为我有一个Previous，Next功能，我想在我的用户点击视图中逐个推送对象。然而，我的渲染失败了，似乎＆＃34; promoObj＆＃34;在下面的代码＆＃34; undefined＆＃34;并无法弄清楚为什么。以下是我的代码 -

Component.ts

import { Component } from '@angular/core';
import { TitleService } from '../services/services.intrests';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { Promo } from '../services/model';


@Component({
    selector: 'promo-banners',
    templateUrl: 'src/components/promotion/promotion-template.html',
    styleUrls: ['./static/css/app.css']
})
export class PromotionWidget implements OnInit {

    promoList: Array<Promo>;
    promoObj: Promo;



    constructor(private titleSvc: TitleService) { }

    ngOnInit() {
        this.retrievePromotions();
        //I want to do something like this and push the first object in view when initialized
        this.promoObj = this.promoList[0];

    }
    retrievePromotions() {
        this.titleSvc.getTitle().subscribe(data => {
            this.promoList = data;
        });

    }


}

在上面的代码中，Promo是一个类，包含了json所期望的属性。

以下是我的服务文件的 service.ts

import { Injectable } from '@angular/core';

import { Http, Response,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
@Injectable()

export class TitleService {
    constructor(private http: Http) { }

    getTitle() {
        console.log("again");
        return this.http.get('./static/json/title.json').map((res: Response) => res.json());
    }

}

View.html

 <div style="max-width: 30%;float: left;" class="promo-card">
        <h2>{{promoObj.title}}</h2>

    </div>

我知道我在做什么傻事但不知道是什么。请帮忙。

Answer 1

这是一个经典的异步陷阱。在你拥有它的地方this.promoObj = this.promoList[0];不能正常工作。您的网络请求尚未完成，因此您的this.promoList为空。这可以解决您的问题：

ngOnInit() {
    this.retrievePromotions().subscribe(data => {
        this.promoList = data;
        this.promoObj = this.promoList[0];
    });
}



retrievePromotions() {
    return this.titleSvc.getTitle();
}

问题的另一部分是html模板在初始化之前尝试访问promoObj上的属性。您可以通过以下几种方式解决此问题：

使用ngIf来获取属性访问权限：

<div *ngIf="promoObj != null" style="max-width: 30%;float: left;" class="promo-card">
        <h2>{{promoObj.title}}</h2>

    </div>

或使用＆＃34;安全导航操作员＆＃34;：

<div style="max-width: 30%;float: left;" class="promo-card">
        <h2>{{promoObj?.title}}</h2>
    </div>

Answer 2

正如前面提到的matmo，您的代码 this.promoObj = this.promoList [0]; 正在尝试访问并分配在组件的初始化状态下尚不存在的值。在订阅中执行此操作可确保网络请求已完成，并且您已从请求中获取数据。

import { Component } from '@angular/core';
import { TitleService } from '../services/services.intrests';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { Promo } from '../services/model';


@Component({
    selector: 'promo-banners',
    templateUrl: 'src/components/promotion/promotion-template.html',
    styleUrls: ['./static/css/app.css']
})
export class PromotionWidget implements OnInit {

    promoList: Array<Promo>;
    promoObj: Promo;



    constructor(private titleSvc: TitleService) { }

    ngOnInit() {
        this.retrievePromotions();
    }

    retrievePromotions() {
        this.titleSvc.getTitle().subscribe(data => {
            this.promoList = data;
            this.promoObj = this.promoList[0];
        });

    }


}

从angular2中的服务填充的列表中获取对象

2 个答案: