如何使用* 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屋!