将 NGFOR 数据移出其标签

Question

这是我第一次发帖批评礼仪。

一直在使用*ngFor＝"；让项目中的项目"；在一个离子项目中，但我遇到了一个问题，即一旦*ngFor在标签中使用，我不知道谁可以将所选项目的数据转换到包含它的原始标签之外的标签中。

代码：

<ion-list>
<div class="wrapper">
<ion-item-group class="day" *ngFor="let day of Excursion_Schedule" >
<ion-item-divider class="dayCard" (click)="day.displayItineraryFlag= !day.displayItineraryFlag"><ion-icon name="ios-arrow-forward" item-right></ion-icon>{{day.ExcSch_date | date:'dd'}}</ion-item-divider>
<!-- CODE I WANT TO MOVE   --> <ng-container *ngIf="day.displayItineraryFlag">
<div ion-item class="cardtitle" *ngFor="let place of day.Excursion_CustomRoadMap">
<p>check</p>
<ion-item-divider class="cardtitle" *ngIf="place.Exc_CustomRoadMap_Name" (click)="place.displayStationDetailsFlag= !place.displayStationDetailsFlag">
<div class="textW">{{place.Description}} - {{place.Exc_CustomRoadMap_StartTime}}</div>
<br>
<div *ngIf="place.displayStationDetailsFlag">
<div class="mapNpic">
<img class="pics" src="{{place.Photo}}" alt="">
<img class="pics" src="https://media-cdn.tripadvisor.com/media/photo-s/14/5f/96/77/nice-view-of-the-sunset.jpg" alt="">
</div>
<div class="dits">
<br> <br>
<h3>Adress</h3>
<h3>Phone Number</h3>
<h3>Email</h3>
<h3>Website</h3>


</div>
</div>
</ion-item-divider> 
</div>
</ng-container>
</ion-item-group>
</div>
<p>
TESTING 123
<!-- PLACE WHERE I WANT TO MOVE ng-container TO   -->
</p>

Answer 1

只需使用插值。要做到这一点，你必须将选定的项目写入一个变量，然后将其插入外部区域。这里有一个例子：

TS

selectedItem: any;
Excursion_Schedule: Array<any> = [];

HTML

<div><span>{{selectedItem}}</span>

<div *ngFor="let day of Excursion_Schedule">
<!-- write the selected day into the local variable here -->
</div>
</div>