單擊列表項時如何顯示其他數據？

Question

我設法顯示一些模擬數據（名稱，電子郵件和用戶名）但是你可以看到我想通過點擊一行在用戶上顯示更詳細的信息（城市，國家，...）

我仍然是角度新手，使用正確的語法仍然有問題。 我在網上搜索了好幾個小時，雖然我知道它應該很容易...

我提前感謝你們

這是我到目前為止：

（這是關於堆棧溢出的第一個問題，我很抱歉錯誤：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

歡迎來到SO！

首先要記住，當使用Angular Material或ng-bootstrap等庫時，您可以使用已經可以執行此操作的組件。 在使用CDK時，您可能也使用Angular Material？ 然后你可以使用擴展面板 。

否則如您所料，您可以輕松實現這一目標。 有不同的方法可以做到這一點，具體取決於您的具體需求（即每個列表元素應該同時擴展還是只擴展一個？）。 我會給你一個我認為最簡單方法的提示，然后你可以根據自己的需要進行調整。

首先是為用戶類型添加一個boolean ，保存每個list-element的狀態。 我們稱之為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文件中。