单击列表项时如何显示其他数据？

Question

I managed to display some mock data (name, email and username) but as you can see I wanted to display more detailed information (city,country,...) on a User by clicking on a row

I am still new to angular and still have problems using the correct syntax. I am stuck searching the web for hours although I know it should be quite easy...

I thank you all in advance

This is what I have so far :

(this is my first question on stack overflow, I am sorry for mistakes :P )

export class ScrollComponent {
  users;
  constructor() { 
    this.users = Array(100)
    .fill(1)
    .map(_ => {
      return {
        name: faker.name.findName(),
        email: faker.internet.email(),
        exMail: faker.internet.exampleEmail(),
        userName: faker.internet.userName(),
        url: faker.internet.url(),
        ip: faker.internet.ip(),
        mac: faker.internet.mac(),
        pass: faker.internet.password(),
        address: faker.address.streetAddress(), 
        zip: faker.address.zipCode(),
        city: faker.address.city(),
        country: faker.address.county(),
        iban: faker.finance.iban(),
        bic: faker.finance.bic(),
        bitcoin: faker.finance.bitcoinAddress()

      };
    });

---

<cdk-virtual-scroll-viewport itemSize="100">


  <li *cdkVirtualFor="let u of users" class="animated slideInUp">
    <h2>{{ u.name }} </h2>
    <p> {{ u.email }} {{ u.userName }} </p>
  </li>


</cdk-virtual-scroll-viewport>

Answer 1

Welcome to SO!

First of all keep in mind, that when using libraries like Angular Material or ng-bootstrap you have components that can already do this. As you are using the CDK, you probably use Angular Material as well? Then you could use the Expansion Panel .

Otherwise as you expected you can achieve this quite easily. There are different ways to do this, depending on your specific needs (ie should every list-element be expandable at the same time or only one?). I will give you a hint for what I think is the easiest way and then you can adjust it to your needs.

First thing is to add a boolean to your user-type holding the state of each list-element. Let's call it detailsVisible .

Then you want to add a ClickHandler to the list items which toggles this boolean :

<li *cdkVirtualFor="let u of users" class="animated slideInUp" (click)="u.detailsVisible = !u.detailsVisible">

and then add the the details into some element whichs visibility you control using *ngIf :

<li *cdkVirtualFor="let u of users" class="animated slideInUp" (click)="u.detailsVisible = !u.detailsVisible">
   <h2>{{ u.name }} </h2>
   <p> {{ u.email }} {{ u.userName }} </p>
   <div *ngIf="u.detailsVisible"> additional details in here </div>
</li>

If you only want one element to be allowed to be expanded at the same time you would go for something like this. The idea is to just store the index of the selected element and only show details for this.

<li *cdkVirtualFor="let u of users; let i = index" class="animated slideInUp" (click)="expandedElement = i">
   <h2>{{ u.name }} </h2>
   <p> {{ u.email }} {{ u.userName }} </p>
   <div *ngIf="users.indexOf(u) === expandedElement"> additional details in here </div>
</li>

and then of course add the expandedElement variable to your .ts-file.