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

Question

我正在尝试在Angular 4中动态构建导航栏并同时理解Angular。

app.components.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;
}

的 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>

请查看图片了解结果。

我已尝试将* ngFor放在<ul>和<div> <ul>与</ul>标记之间。

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

Answer 1

  

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

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

更改数组

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>"}
]