在另一个组件上使用ngFor的信息

Question

我需要捕获有关在视图中呈现的ngFor循环实例的数据，然后将其输出到另一个视图，该视图呈现有关在ngFor循环中捕获的第一个信息的额外信息。

例：

.ts文件

user = [
  {name: "Lucho", lastname: "Pai"},
  {name: "Debora", lastname: "Melo"},
  {name: "Elba", lastname: "Lazo"}
]

.html文件

<ul *ngFor="let user of users">
  <li> 
    Name: {{ user.name }}
    Lastname: {{user.lastname }}
  </li>
</ul>

---

这将为每个用户呈现3，一个。我想点击其中任何一个并转到另一个视图，向我显示有关姓氏家族的详细信息。即，如果我点击“Elba”，我想导航到“Lazo”家族的完整描述。因此，我需要捕获该用户信息以进行导航，然后向我的数据库发出请求以获取“Lazo”系列信息。

有些日子我一直在考虑这个问题，但是我无法理解我需要理解的概念。它是为我抽象的。在input（），output（），viewchild（）等之间，我只是纠结自己。

我真的希望自己解释一下，问候。

Answer 1

亲爱的Kaiser我认为你可以使用本例中的本地存储

first.ts

//first component
//Inject Router in your constructor from 
import { Router } from '@angular/router';
constructor(private router:Router) { }
navigateToOtherComponent(user){
localStorage.setItem("user",user);
this.router.navigate(['/second.ts']);
}

html的

//first component
// Add Event (Click) on the <li> tag or add a button aside with your content

<li (Click)="navigateToOtherComponent(user)"> 
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>

second.ts

//second component
constructor() {
const user = localStorage.getItem("user"); 
}

Answer 2

您可以使用@Input将所选族的值传递给子组件

component.ts

selectedFamily:any;

HTML

 <ul *ngFor="let user of users">
      <li (click)="selectedFamily=user;"> 
        Name: {{ user.name }}
        Lastname: {{user.lastname }}
      </li>
    </ul>
<detail-component *ngIf="selectedFamily" [value]="selectedFamily"></detail-component>

detail.component.ts

@Input() value:any;

更新： - 如果您想要导航到另一条路线以显示该系列的详细信息，您可以使用参数来传递该系列的唯一ID

e.g

 <ul *ngFor="let user of users">
          <li (click)="onFamilySelect(user)"> 
            Name: {{ user.name }}
            Lastname: {{user.lastname }}
          </li>
        </ul>

component.ts

detailUrl:string="details/"// example route
onFamilySelect(user:any){
    this.router.navigate(this.detailUrl+user.UserId)//assuming UserId is unique Id
    }
}

在新组件上

ngOnInit(){
  let userId = this.route.snapshot.param['id'];
   //and get the detail from db by userid
}

在route.module.ts上

export const routes: Routes = [
{ path: 'details/:id', component: NewComponent }
     ];

Answer 3

假设您的详细信息组件已配置路由并称为详细信息。因此，只有在路由到详细信息组件时才使用此答案。如果要在父组件本身上显示详细信息，请使用下面其他人给出的答案。

在list.component.html中

<ul *ngFor="let user of users">
  <li> 
    Name: {{ user.name }}
    Lastname: {{user.lastname }}
    <button (click)="showDetails(user.name)">Details</button>
  </li>
</ul>

在list.component.ts中

constructor(private router: Router){}

user = [
  {name: "Lucho", lastname: "Pai"},
  {name: "Debora", lastname: "Melo"},
  {name: "Elba", lastname: "Lazo"}
]

showDetails(user){
    this.router.navigate(['/details', { user: user}]);
}

在您的详细信息组件中，这是您接收数据的方式：

ngOnInit() {
  this.user$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      this.user = params.get('user');
    })
  );
  //Do something with this.user
}

希望这可以帮助。

Answer 4

您可以在函数中传递用户对象，并根据该特定用户运行导航逻辑。例如，在html文件中，您可以绑定和事件到ul：

<ul *ngFor="let user of users">
  <li (click)="navigateBasedOnUser(user)"> 
    Name: {{ user.name }}
    Lastname: {{user.lastname }}
  </li>
</ul>

然后在组件中，您可以定义navigateBasedOnUser函数进行导航。例如：

user = [
  {name: "Lucho", lastname: "Pai"},
  {name: "Debora", lastname: "Melo"},
  {name: "Elba", lastname: "Lazo"}
]
navigateBasedOnUser(user){
// the user parametere here will have the user object of the `li` the user clicked on. you can access all the values of the user i.e. name, last name e.t.c.
 this.router.navigate(["detailsComponent",user.name])
}