Angular 如何使用*ngIf构建导航栏？

我试图在Angular 4中动态构建导航条，同时理解Angular

应用程序组件.ts

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

export class newRoutes{
    route: string;
}
var NEWROUTES: newRoutes[]=[
    {route: "<li><a routerLink='/home'   routerLinkActive='active' [routerLinkActiveOptions]=' {exact: true}'>Home</a></li>"},
    {route: "<li><a routerLink='/scan'   routerLinkActive='active'>Order</a> </li>"},
    {route: "<li><a routerLink='/find'   routerLinkActive='active'>Search</a></li>"},
    {route: "<li><a routerLink='/status' routerLinkActive='active'>Status</a></li>"}
]
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'Inspiredby';
    newroutes: newRoutes[] = NEWROUTES;
}

从'@angular/core'导入{Component}；
出口类新航线{
路径：字符串；
}
var NEWROUTES:NEWROUTES[]=[
{route:“
app.component.html

<div style="text-align:center">
    <p>{{title}}</p>
</div>
<nav>
    <ul>
        <li *ngFor="let newroute of newroutes">{{newroute.route}}</li>
    </ul>
</nav>
<router-outlet></router-outlet>


{{title}}


{{newroute.route}


请查看图片了解结果

我已尝试将*ngFor放入
和
标签之间的
中

我认为ngIf和ngFor在代码呈现之前就已经应用到代码中了。PS我已经尝试过谷歌搜索它，有一些解决方案，但它们不适合我的工作方式


你的html应该是这样的。你正在传递html，所以你需要绑定html


{{title}}





更改数组类型

var NEWROUTES: newRoutes[]=[
    {route: "<li><a [routerLink]="['/home']"   routerLinkActive='active' [routerLinkActiveOptions]=' {exact: true}'>Home</a></li>"},
    {route: "<li><a [routerLink]="[/scan']"   routerLinkActive='active'>Order</a> </li>"},
    {route: "<li><a [routerLink]="['/find']"   routerLinkActive='active'>Search</a></li>"},
    {route: "<li><a [routerLink]="[/status']" routerLinkActive='active'>Status</a></li>"}
]

var NEWROUTES:NEWROUTES[]=[
{路线：“
家
”}，
{路线：“
顺序
”}，
{路由：
搜索
“}，
{路线：
状态
“}
]
那么问题是什么？您所指的
*ngIf
在哪里？导航栏现在显示谢谢，但不再工作。我相信这是因为angular删除了我html中的一些内容。导航到5平台浏览器时会出现一条警告。es5.js:1017警告：清理html删除了一些内容（请参阅）。
var NEWROUTES: newRoutes[]=[
    {route: "<li><a [routerLink]="['/home']"   routerLinkActive='active' [routerLinkActiveOptions]=' {exact: true}'>Home</a></li>"},
    {route: "<li><a [routerLink]="[/scan']"   routerLinkActive='active'>Order</a> </li>"},
    {route: "<li><a [routerLink]="['/find']"   routerLinkActive='active'>Search</a></li>"},
    {route: "<li><a [routerLink]="[/status']" routerLinkActive='active'>Status</a></li>"}
]