Question

我是角色2的新用户，在我的组件public class Country { public static final int ON = 0; public static final int QC = 1; public static final int BC = 2; public static final int AB = 3; public static final int MB = 4; public static final int NO_SUCH_PROVINCE = -1; private String[] provinces; private int[] population; public Country() { provinces = new String[5]; provinces[0] = "Ontario"; provinces[1] = "Quebec"; provinces[2] = "British Columbia"; provinces[3] = "Alberta"; provinces[4] = "Manitoba"; population = new int[5]; population[ON] = 12851821; population[QC] = 7903001; population[BC] = 4400057; population[AB] = 3645257; population[MB] = 1208268; } public int getPopulation(String province) { int i = 0; int temp = 0; while(i < provinces.length) { if(province == provinces[i]) { temp = population[i]; }else { temp = NO_SUCH_PROVINCE; } i++; } return temp; }中我正在调用服务来获取一些数据。这是我的组件ngOnInit()代码

ngOnInit()

它返回数据，但在我插入数据的模板中，它没有显示任何内容

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

import { Model } from './model';
import { CustomizeModelService } from './customize-model.service';

@Component({
    selector: 'app-customize-model',
    templateUrl: './customize-model.component.html',
    styleUrls: ['./customize-model.component.scss']
})
export class CustomizeModelComponent implements OnInit {

    models = [];

    constructor(private custModelService: CustomizeModelService) {}

    ngOnInit() {
        let params = JSON.stringify({
            "query": "{models(modelname: \"TestModel\") {_id, modelname, description}}"
        });
        this.custModelService.getModelByName(params).subscribe(data => {
            this.models.push(data);
            console.log(this.models);
        });
    }

}

我不知道我在哪里弄错了，或者为什么数据没有绑定到模板，任何帮助都将受到高度赞赏。需要更多代码，我可以提供

TIA

Answer 1

在Angular 2中每个Http服务方法返回一个Observable HTTP响应对象，因此您必须按如下方式订阅其响应：

this.custModelService.getModelByName(params).subscribe(data => {
  this.models.push(data);
  console.log(this.models);
});

Answer 2

尝试使用*ngIf来确保api中的数据可以在html中使用。像这样<h3 *ngIf="models" class="title">{{models.modelname}}</h3>。没有*ngIf，在api服务完成之前在模板中使用models.modelname将引发错误，但是在几秒钟之后，数据将在刷新页面时显示。 console.log是一样的。

Answer 3

模型是一个数组，因此它不会直接在其上具有模型属性。相反，您必须使用* ngFor来迭代数组中的每个模型。

另外

  this.models.push(data));

将数据作为单个项目添加到模型中。

角度2中的数据无约束问题

3 个答案: