如何使用 *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>"}
]