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

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

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]);
        }
    }


}

从“@angular/core”导入{Component}；
@组成部分({
选择器：“名称”，
模板：
`{{title}}

{{namesList[0]}
{{namesList[1]}
{{namesList[2]}
{{namesList[3]}
`
})
导出类组件1{
title=“你好！”；
名称列表：字符串[]；
名字：字符串[]=[“哈利”、“赫敏”、“罗恩”、“德拉科”]；
姓氏：字符串[]=[“波特”、“格兰杰”、“韦斯莱”、“马尔福”]；
构造函数（）{
对于（设i=0；i您需要初始化数组

namesList:string[]=[];

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

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

constructor（）{
对于（设i=0；i您需要初始化数组

namesList:string[]=[];

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

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

constructor（）{
对于（设i=0；i您需要使用
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]);
        }
    }
}

从“@angular/core”导入{Component}；
@组成部分({
选择器：“名称”，
模板：
`{{title}}

{{namesList[0]}
{{namesList[1]}
{{namesList[2]}
{{namesList[3]}
`
})
导出类组件1{
title=“你好！”；
名称列表：字符串[]=[]；
名字：字符串[]=[“哈利”、“赫敏”、“罗恩”、“德拉科”]；
姓氏：字符串[]=[“波特”、“格兰杰”、“韦斯莱”、“马尔福”]；
构造函数（）{
对于（设i=0；i您需要使用
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]);
        }
    }
}

从“@angular/core”导入{Component}；
@组成部分({
选择器：“名称”，
模板：
`{{title}}

{{namesList[0]}
{{namesList[1]}
{{namesList[2]}
{{namesList[3]}
`
})
导出类组件1{
title=“你好！”；
名称列表：字符串[]=[]；
名字：字符串[]=[“哈利”、“赫敏”、“罗恩”、“德拉科”]；
姓氏：字符串[]=[“波特”、“格兰杰”、“韦斯莱”、“马尔福”]；
构造函数（）{
对于（设i=0；i您也可以在模板中使用

html组件

{{title}

{{v}}{{lastNames[i]}


您可以在这里看到使用
也可以在这样的模板中使用

html组件

{{title}

{{v}}{{lastNames[i]}


您可以在这里看到使用

首先将
名称列表
初始化为数组，以便将元素推送到其中

使用此
引用构造函数内的
名称列表

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

constructor（）{
for（设i=0；i
首先将
名称列表
初始化为数组，以便将元素推送到其中

使用此
引用构造函数内的
名称列表

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

constructor（）{
for（设i=0；我的代码甚至不应该编译。请阅读并修复编译错误。它可能表示类似“未定义变量名称列表。您是指此.namesList吗？”。只需使用this.namesList.push代替namesList.push并使用数组namesList分配名称列表：string[]=[]；来自@surjeetThanks，@Akki的完美解决方案。请解决我下面的问题。此代码甚至不应该编译。请阅读并修复编译错误。它可能会说“未定义变量名称列表。您是指此.namesList吗？”。只需使用This.namesList.push代替namesList.push，并使用数组namesList:string分配名称列表[] = []；来自@surjeetThanks，@Akki的完美解决方案。请回答我下面的问题。@faceturn。嘿，伙计，我正确地描述了我所做的更改。@faceturn。嘿，伙计，我正确地描述了我所做的更改。@Downvoter你能解释错误的部分或你否决投票的原因吗？@Downvoter你能解释错误的部分或原因吗你投否决票的理由？