如何在角度拖放组件中获取数组长度答案

【问题标题】：how to get array length in Angular Drag and Drop Component如何在角度拖放组件中获取数组长度
【发布时间】：2019-12-11 08:10:54
【问题描述】：

我想在下拉列表中显示访问过的国家（你去过哪里）如何在我的 Ionic App 中解决这个问题 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

【问题讨论】：

标签： angular ionic-framework drag-and-drop angulardraganddroplists

【解决方案1】：

您可以使用此语法将索引值设置为 HTML 元素的属性：

YOUR HTML ELEMENT:

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

或者你可以使用如下语法：

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

【讨论】：

谢谢，到目前为止一切正常，但所有数组都再次出现。基本上我想显示“访问过的 55 个国家”已申请：

{{done .length}} 个国家访问过

所以你只需要使用 "let done = count" 并且 {{done}} 将是你的总数:)

【解决方案2】：

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

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

【讨论】：