разрушаясь в угловом перекрытии

Question

У меня есть приложение chatborad, где под каждым постом есть комментарии, но я делаю кнопку, которая сворачивает все комментарии для лучшего просмотра, особенно когда они растут.

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let comment of commentArr">{{ comment.body }}
        <div class="input-group-prepend float-right">
          <span class="input-group-text" id="inputGroup-sizing-sm">{{ comment.userName }}</span>
        </div>
      </li>
    </ul>
  </div>

прямо сейчас все комментарии добавляются, пока они свернуты, хотя я использую "show", потому что я хочу, чтобы их показывали при добавлении, тогда, если они вырастут, я могу свернуть их.

другая проблема заключается в том, что сейчас, когда я нажимаю кнопку свертывания в любой из «синих кнопок добавления комментариев, показанных на скриншоте», она только сворачивает комментарии к первому сообщению, как я могу сделать, чтобы каждая кнопка добавления сворачивала ее собственные комментарии?

спасибо!

см. Синюю кнопку для свертывания комментариев, добавление комментариев связано с onEnter ()

Answer 1

Сделайте это таким образом.

пример приложения:

app.component.ts

export class AppComponent {
  title = 'app';
  hotels = [
    {name: 'Hotel1', comment: 'Hotel1 info'},
    {name: 'Hotel2', comment: 'Hotel2 info'},
    {name: 'Hotel3', comment: 'Hotel3 info'}

  ];
  prevHotel: any;

  changeIsShohToTrue(hotel) {
    if (this.prevHotel && this.prevHotel.expand && this.prevHotel !== hotel) {
      hotel.expand = false;
    }
    hotel.expand = !hotel.expand;
    this.prevHotel = hotel;

  }
}

app.component.html

<div *ngFor="let hotel of hotels">
    <div>{{ hotel.name }}</div>
    <div>
      <button (click)="changeIsShohToTrue(hotel)" type="button" class="btn btn-default btn"><i
        class="glyphicon glyphicon-align-justify"></i></button>
    </div>

    <div *ngIf="hotel.expand">Comment: {{hotel.comment}}</div>
  </div>