Question

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

invoiced-commodities

Answer 1

您也可以在模板中使用*ngFor

html组件

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

您可以在此处看到 stackblitz

Answer 2

初始化 nameList作为数组，以便将元素压入其中

namesList:string[] = [];

使用 this来引用构造函数中的nameList

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

Answer 3

您需要初始化数组

namesList:string[]=[];

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

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

STACKBLITZ DEMO

Answer 4

您需要使用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

角度代码未在浏览器中显示结果

4 个答案: