如何使用* ngIf构建导航栏? [英] How to build a nav bar using *ngIf?

问题描述

我试图在Angular 4中动态构建导航栏并同时了解Angular.

I am trying to dynamically build a nav bar in Angular 4 and understand Angular at the same time.

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>

请查看图片以获取结果.

Please see the image for the results.

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

I have tried putting the *ngFor in the <ul> and in a <div> between <ul> and the </ul> tags.

我认为ngIf和ngFor在呈现之前已应用于代码.PS我已经尝试使用Google搜索，虽然有一些解决方案，但它们不适合我的工作方式.

I thought that ngIf and ngFor were applied to the code before it is rendered. PS I have tried Googling it and there are some solutions but they don't fit the way I am working.

推荐答案

您的html应该像.您传递html，因此您需要绑定html

your html should be like. you passing html so you need to bind 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>"}
]

这篇关于如何使用* ngIf构建导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！