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

Question

我正在使用 ngFor（在 "list-component" 中）显示几个 "item-component"，我想在用户点击其中一个项目时将其发送到 "item-detail-component" .

问题是我仍然是 Angular 的早期学习者，我不理解那些根本不存在于我脑海中的 routerLinks 背后的逻辑。

我尝试使用 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 class 有 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 class 没有 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>

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

How to generate different routerLinks from ngFor created items?

routing

routes

ngfor

routerlink

angular