Question

所以我用自举面板创建了一个面板，我只显示面板标题，当我按下它时，我想做一个显示我面板所有元素的ngIf。但我希望它只显示按下的面板的元素，并且它不显示使用我的ngFor制作的所有面板的元素。我会发布一张图片，我的意思。

这就是它们全部关闭时的样子：

现在我按数字41例如我想要发生的是只有面板41中的元素变得可见。但这就是它发生的事情;

所有面板元素都可见。有没有办法只显示按下的元素？

HTML CODE：

    <div *ngFor="let _dagpunt of dagpunt ">
    <div class="list-group">

        <a class="list-group-item active, uiterlijk" (click)="showDagpunt()">
           {{_dagpunt.bootcampid}}
        </a>
        <div *ngIf="showdagpunten">
            <a class="list-group-item">
                <span style="font-weight:bold">Naam :</span> {{_dagpunt.naam}}<br />
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold">  Datum : </span>{{_dagpunt.datum | date:"dd/MM/yy"}}<br />
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold"> Beginuur :</span>   {{_dagpunt.beginuur | date:"h:mm a"}}
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold"> Einduur :</span>  {{_dagpunt.einduur | date:"h:mm a"}}
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold"> Beschrijving :</span>  {{_dagpunt.description}}
            </a>
            <a class="list-group-item">
                <span (click)="onSelect(_dagpunt)" class="btn btn-info" role="button">Review</span>
                <!--<span (click)="delete(_dagpunt)" class="btn btn-info" role="button">Uischrijven</span>-->
            </a>
        </div>
    </div>

</div>

所以我声明我的数组：dagpunt: Dagpunt[] = [];

我的界面dagpunt看起来像这样：

export interface Dagpunt {
    iddagpunt: number;
    naam: string;
    description: string;
    datum: Date;
    beginuur: Date;
    einduur: Date;
    bootcampid: number;

}

所以这就是我的dagpunt数组的console.log的样子：

Answer 1

试试这个：

  <a class="list-group-item active, uiterlijk" (click)="showDagpunt()">
     {{_dagpunt?.bootcampid}}
  </a>
  <div *ngIf="_dagpunt?.active">
      <a class="list-group-item">
          <span style="font-weight:bold">Naam :</span> {{_dagpunt.naam}}<br />
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold">  Datum : </span>{{_dagpunt.datum | date:"dd/MM/yy"}}<br />
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold"> Beginuur :</span>   {{_dagpunt.beginuur | date:"h:mm a"}}
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold"> Einduur :</span>  {{_dagpunt.einduur | date:"h:mm a"}}
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold"> Beschrijving :</span>  {{_dagpunt.description}}
      </a>
      <a class="list-group-item">
          <span (click)="onSelect(_dagpunt)" class="btn btn-info" role="button">Review</span>
          <!--<span (click)="delete(_dagpunt)" class="btn btn-info" role="button">Uischrijven</span>-->
      </a>
  </div>

showDagpunt(item){
  for(let i=0; i< this.dagpunt.length; i++){
    this.dagpunt[i].active = false;
  }
  item.active = true;
}

在ng的单个元素上使用* ngIf

1 个答案: