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

Question

我设法显示了一些模拟数据（名称，电子邮件和用户名），但是如您所见，我想通过单击一行来向用户显示更多详细信息（城市，国家/地区...）

我仍然对angular还是陌生的，使用正确的语法仍然有问题。 尽管我知道应该很容易，但是我仍然在网上搜索了几个小时...

我先谢谢大家

这是我到目前为止的内容：

（这是我关于堆栈溢出的第一个问题，对不起：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

欢迎您！

首先请记住，使用Angular Material或ng-bootstrap之类的库时，您已经具有可以执行此操作的组件。在使用CDK时，您是否也可能使用Angular Material？然后，您可以使用Expansion Panel。

否则，您可以很轻松地实现此目标。根据您的特定需求，可以采用不同的方法（例如，每个列表元素都可以同时扩展还是只能扩展一个？）。我会提示您我认为最简单的方法，然后您可以根据需要进行调整。

第一件事是向您的用户类型添加boolean，以保存每个列表元素的状态。我们称之为detailsVisible。

然后，您要将ClickHandler添加到列表项中，以切换此boolean：

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

，然后将详细信息添加到您可以使用*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>

如果您只希望同时允许扩展一个元素，则可以使用类似的方法。想法是只存储所选元素的索引，而仅显示其详细信息。

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

，然后将expandedElement变量添加到您的.ts文件中。