調用在Angular 7+的html文件中使用全局打字稿文件的數組

Question

我在使用global.ts文件獲取角度來調用HTML文件中的數組時遇到問題。 通常，當您使用數組時，請為該元素指定數組名稱，然后使用該* ngFor =“ let elements of elements”循環其兄弟變量。 我已經在使用導入並設置結構來調用global.ts文件了。

 <div ngxSlickItem *ngFor="let slide of slides" class="slide"> <div class="slide-header"> {{ slide.header }} </div> <div class="slide-paragraph"> {{ slide.paragraph }} </div> <div class="slide-link"> <a href="{{ slide.link }}"> Learn More </a> </div> </div> 

但是，如何使用使用數組的global.ts文件調用數組呢？ 通常，在全局打字稿文件中使用簡單變量看起來像這樣。 我嘗試了globals.slide.header，但這似乎不正確。

 <a class="nav-button btn btn-primary" href="#"> {{globals.globalHrefLink}} </a> 

我已經創建了這個ts文件：

 import { Injectable } from '@angular/core'; @Injectable() export class Globals { // Anchor Link globalHrefLink = 'new request'; navitems = [ { navTitle: 'home', routelink: '/home', }, { navTitle: 'my request', routelink: '/myrequest', } ]; } 

但是，如何在標頭組件中調用它呢？

 <ul class="navbar-nav ml-auto flex-nowrap" *ngFor="let navitem of navitems" class="navitem"> <li class="nav-item"> <a class="nav-item nav-link active" routerLink="{{navitem.routelink}}">{{navitem.navTitle}}</a> </li> </ul> 

幫助表示感謝！

Answer 1

首先，您必須在component.ts中導入global.ts

import { AppGlobals } from '../app.globals';

export class Abc {
constructor(public globals: AppGlobals) {}

}

現在您可以使用globals的任何變量，例如在globals.ts有一個elements數組

elements = [ { NAME: 'test'} ];

<div *ngFor="let el of globals.elements">
  {{el.NAME}}
</div>