如何从 ngFor 创建的项目生成不同的 routerLinks？

Question

我正在使用 ngFor（在“列表组件”中）来显示几个“项目组件”，并且我想在用户单击其中一个项目时将其发送到“项目详细信息组件” .

问题是我仍然是 Angular 的早期学习者，我不明白那些在我脑海中甚至不存在的 routerLink 背后的逻辑。

我尝试使用 let i = index 获取我的项目的“id”，但在这一步之后我不知道如何处理 i。

有人可以帮我解决这个问题吗？非常感谢！

liste-actus HTML

<div class="container list-group">
  <a *ngFor="let actu of actus | async; let i = index" class="list-group-item list-group-item-action flex-column align-items-start" routerLink="">
     <app-item-actus [actu]="actu"></app-item-actus>
  </a>
  <br>
</div>

liste-actus TS

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

import { ActuService } from 'src/app/services/actu.service';
import { Actu } from 'src/app/modeles/actu';

@Component({
    selector: 'app-liste-actus',
    templateUrl: './liste-actus.component.html',
    styleUrls: ['./liste-actus.component.css']
})

export class ListeActusComponent implements OnInit {

    actus: Observable<Actu[]>;

    constructor(private actuService: ActuService, private route: ActivatedRoute) { 
    }

    ngOnInit() {
        this.actus = this.actuService.getActusList();
    }

}

Answer 1

除了routerLink 和id 部分之外，一切似乎都很好。

您的Actu 类是否有id 属性？如果是，那么您可以在routerLink 中使用actu.id。

所以a 标签应该是这样的：

<a *ngFor="let actu of actus | async;" [routerLink]="['path/of/your/route', actu.id]"
 /*other stuff*/ 
>
     <app-item-actus [actu]="actu"></app-item-actus>
</a>

请注意，routerLink 在方括号中 ([routerLink])。这样，您可以将变量绑定到属性。如果不是，则放入属性中的值只是一个字符串。

如果您的Actu 类没有id 属性并且您想使用索引作为id，那么您应该使用它。

<a *ngFor="let actu of actus | async; let i = index" [routerLink]="['path/of/your/route', i]"
 /*other stuff*/ 
>
     <app-item-actus [actu]="actu"></app-item-actus>
</a>