Angular 代码未在浏览器中显示结果答案

【问题标题】：Angular code not showing the results in browserAngular 代码未在浏览器中显示结果
【发布时间】：2018-12-15 16:20:55
【问题描述】：

下面是我的代码。我想在名字和姓氏的帮助下打印全名，但我的代码在浏览器中没有显示任何内容。它显示为空白。请提出任何更正建议！

import {Component} from "@angular/core";

@Component({
selector: "names",

template: 
`<h2>{{title}}</h2>
<ul>
<li>{{namesList[0]}}</li>
<li>{{namesList[1]}}</li>
<li>{{namesList[2]}}</li>
<li>{{namesList[3]}}</li>
</ul>`

})


export class Comp1Component {
    title = "Hello!";
    namesList:string[];
    firstNames: string[] = ["Harry","Hermione","Ron","Draco"];
    lastNames:string[] = ["Potter","Granger","Weasley","Malfoy"];

    constructor() {
        for(let i =0;i<4;i++) {
            namesList.push(this.firstNames[i]+" "+this.lastNames[i]);
        }
    }


}

【问题讨论】：

这段代码甚至不应该编译。阅读并修复编译错误。它可能会说“未定义变量名称列表。您的意思是 this.namesList 吗？”。
只需使用 this.nameList.push 代替 nameList.push 并为 namesList 分配一个数组 namesList:string[] = [];
来自@surjeet 的完美解决方案
谢谢，@Akki。请在下面回答我的问题。

标签： javascript angular web frameworks

【解决方案1】：

你需要初始化数组

namesList:string[]=[];

并在构造函数中使用 this.namesList

constructor() {
        for(let i =0;i<4;i++) {
           this.namesList.push(this.firstNames[i]+" "+this.lastNames[i]);
        }
    }

STACKBLITZ DEMO

【讨论】：

【解决方案2】：

你需要使用this.namesList.push而不是namesList.push并且需要用一个空白数组来初始化它。

这是更新后的代码。复制粘贴即可。

import {Component} from "@angular/core";

@Component({
selector: "names",

template: 
`<h2>{{title}}</h2>
<ul>
<li>{{namesList[0]}}</li>
<li>{{namesList[1]}}</li>
<li>{{namesList[2]}}</li>
<li>{{namesList[3]}}</li>
</ul>`

})


export class Comp1Component {
    title = "Hello!";
    namesList:string[] = [];
    firstNames: string[] = ["Harry","Hermione","Ron","Draco"];
    lastNames:string[] = ["Potter","Granger","Weasley","Malfoy"];

    constructor() {
        for(let i =0;i<4;i++) {
            this.namesList.push(this.firstNames[i]+" "+this.lastNames[i]);
        }
    }
}

在这里找到演示：

https://stackblitz.com/edit/angular-jmt7uy?file=src%2Fapp%2Fapp.component.ts

【讨论】：

@faceturn。嘿，伙计，我正确描述了我所做的更改。

【解决方案3】：

你也可以像这样在模板中使用*ngFor

html组件

<h2>{{title}}</h2>
<ul *ngFor="let v of firstNames; let i =index;">
<li>{{v}} {{lastNames[i]}}</li>
</ul>

你可以在这里看到工作stackblitz

【讨论】：

【解决方案4】：

初始化 nameList 首先作为一个数组，以便将元素推送到它

namesList:string[] = [];

使用this在构造函数中引用nameList

constructor() {
    for(let i =0;i<4;i++) {
        this.namesList.push(this.firstNames[i]+" "+this.lastNames[i]);
    }
}

【讨论】：

@Downvoter 你能解释一下错误的部分或你投反对票的理由吗？