Question

export class CountriesPage {
  todo = [
    'url: https://www.countryflags.io/gb/shiny/64.png',

<div class="container">
  <h2>Countries</h2>

  <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
      [cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">
    <div class="list-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  <img [src]='list.url'/>
  </div>
</div>

我将要创建一个国家/地区应用程序，用户可以在其中拖动他已经访问过的国家/地区并将其拖放到完成的数组中。我为此使用了Angular DragandDrop组件，我需要知道如何在todo数组中正确实现以下国家/地区标志

console.log说：无法读取未定义的属性'url'

Answer 1

您的img标记放错了位置

<div class="list-item" *ngFor="let item of todo" cdkDrag>
  <img [src]="list.url" />
</div>

“ todo”数组必须是对象数组（键：值）

todo = [
    {url: 'https://www.countryflags.io/gb/shiny/64.png'}
]

这是stackblitz中的一个例子 https://stackblitz.com/edit/angular-knvetq

希望我能帮上忙。

Answer 2

您应按项目替换列表，请尝试

<div class="container">
  <h2>Countries</h2>

  <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
      [cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">
    <div class="list-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  <img [src]='item.url'/>
  </div>
</div>

图像未显示在Angular拖放组件上

2 个答案: