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

您可以像这样使用@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

例如

 <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 2

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

在您的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 3

您可以在函数中传递用户对象，并根据该特定用户运行导航逻辑。例如，在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])
}

Answer 4

亲爱的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"); 
}

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

4 个答案: