如何在不单独给出数组元素索引的情况下给出所有数组元素的链接？

Question

<div *ngFor="let offers1 of offers1">{{offers1}}</div>

我在我的HTML代码中有这个。

offers1: any= [
    'LED TVs',
    'QLED TVs',
    'OLED TVs',
    '4K Ultra HD TVs',
    'Smart TVs',
    'Full HD TVs',
    'HD Ready TVs',
    'Large Screens',
    'Medium Screens',
    'Small Screens',
    'TV Accessories',
    'TV Wall Mount Stands',
    'Cables & Connectors',
    'Media Streaming Devices'
];

‘在我的TS文件中有这个数组。我需要我的每个数组元素将我带到新的屏幕.So，我需要为我的所有数组元素提供链接，而不是单独给出我的数组元素的索引。将来我将更改我的数组元素.so我需要用于提供链接的稳定内容。

提前谢谢你。

Answer 1

你可以试试这样的东西。在您的组件TS中：

links = [
        { title: 'LED TVs', link: 'led'},
        { title: 'QLED TVs', link: 'qled'},
        { title: 'OLED TVs', link: 'oled'}
    ];

它与以下HTML一起工作

<ul class="navbar-nav ml-auto">
   <li *ngFor="let link of links" class="nav-item" routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }">
      <a class="nav-link" [routerLink]="link.link" [routerLinkActive]="['is-active']">
          {{link.title}}
       </a>
   </li>
</ul>

其中组件typescript的链接数组中的'link‘元素引用-routing.ts

const routes: Routes = [
  {
    path: '', component: AllTVComponent,
    children: [
      { path: '', redirectTo: 'led', pathMatch: 'full' },
      { path: 'led', component: LedComponent },
      { path: 'qled', component: QLedComponent },
      { path: 'oled', component: OLedComponent }
    ]
  },
  
];

这将允许您的应用程序导航到相应的组件。祝你编码愉快！