Как я могу отобразить дополнительные данные при нажатии на элемент списка?

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? Тогда вы можете использовать Панель расширения .

В противном случае, как вы и ожидали, вы можете достичь этого довольно легко. Существуют разные способы сделать это, в зависимости от ваших конкретных потребностей (т. Е. Должен ли каждый элемент списка быть расширяемым одновременно или только один?). Я дам вам подсказку о том, что я считаю самым простым способом, а затем вы сможете настроить его под свои нужды.

Прежде всего, добавьте 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-файл.