angular - 如何在角度拖放组件中获取数组长度

Question

我想在下拉列表中显示访问过的国家（你去过哪里） 如何在我的 Ionic 应用程序中解决这个问题 https://mytopcountries.web.app/tabs/home

<div class="example-container">
		<h2>Where have you been</h2>

		<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
			class="example-list" (cdkDropListDropped)="drop($event)">
			<div class="example-box" *ngFor="let item of done" cdkDrag>
				<div class="flag-box">
					<img [src]="item.url" alt="flag image">
					<p>{{ item.name }}</p>
				</div>
			</div>
		</div>
	</div>
</div>



 done = [
{url: 'https://www.countryflags.io/ad/shiny/64.png', name: 'Andorra' },
{url: 'https://www.countryflags.io/ae/shiny/64.png', name: 'UAE' },
{url: 'https://www.countryflags.io/at/shiny/64.png', name: 'Austria' },
{url: 'https://www.countryflags.io/au/shiny/64.png', name: 'Australia' },
{url: 'https://www.countryflags.io/aw/shiny/64.png', name: 'Aruba' },
{url: 'https://www.countryflags.io/bg/shiny/64.png', name: 'Bulgaria' },
{url: 'https://www.countryflags.io/ch/shiny/64.png', name: 'Switzerland' },
{url: 'https://www.countryflags.io/cn/shiny/64.png', name: 'China' },

];

  drop(event: CdkDragDrop<any[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}


I want to display the visited countries in the dropped list  (where have you been)
How to solve this in my Ionic App
https://mytopcountries.web.app/tabs/home

Answer 1

You can use this syntax to set the index value into an attribute of the HTML Element:

YOUR HTML ELEMENT:

<div class="example-box" *ngFor="let item of done"; let i = index" [attr.data-index]="i" cdkDrag>
... </div>

Or you can use a syntax like:

   <div class="example-box" *ngFor="let item of done; index as i" crkDrag>
     //And use it like that
   <p> {{i+1}} {{item}} </p>
   </div>

Answer 2

所有数组迭代，基本上我只想显示“访问过的55个国家

   <div class="example-box" *ngFor="let item of done; " [attr.data-index]="i" cdkDrag>
 <p> {{done.length}} countries visited</p>
  </div>