Question

我有一个页面，其中显示包含locations的列表，然后点击其中的每个列表，我为assets显示location。我已经设置了这样的模板：

<li
    *ngFor="let location of locations"
    (click)="select(location)"
    droppable
    [dragOverClass]="'drag-target-border'"
    (onDrop)="onItemDrop($event, location)"
    >
      {{ location.name }}
      <ul *ngIf="currentLocation == location && assetsVisible">
        <ng-container *ngIf="currentLocation.assets?.length > 0;else message">
          <li
            *ngFor="let asset of currentLocation.assets"
            class="asset"
            draggable
            [dragData]="asset"
            >
            <p>{{ asset.title }}</p>
            <p>{{ asset.address }}</p>
            <p>{{ asset.value }}</p>
          </li>
        </ng-container>
        <ng-template #message>No assets for {{ location.name }}</ng-template>
      </ul>
  </li>

在组件中，我尝试先设置空资产数组，并设置一个带有属性currentLocation的空assets对象：

  locations: any[] = [];
  currentLocation: any = {
    assets: any[] = []
  };

然后在方法select中，我正在获取这样的资产：

  select(location){

    if (this.currentLocation != location || !this.assetsVisible) {
      this.assetsVisible = true;
    }
    else {
      this.assetsVisible = false;
    }

    this.currentAddress = address;

    this.locationService.getAssets(location.Id)
      .subscribe(
        assets => this.currentLocation.assets = assets
      );
  }

我想做的是，因为我正在使用the drag and drop plugin for Angular我希望用户可以将资源从一个位置拖到另一个位置。然后暂时将该资产推送到资产被删除的属性currentLocation.assets的数组中。我已经为此做了一个功能：

onItemDrop(e: any, location) {
    this.select(location);
    this.currentLocation.assets.push(e.dragData);
}

将资产从一个位置拖放到另一个位置，但是我收到错误：

错误类型错误：无法读取未定义
的属性“推送”

我在select和onItemDrop方法中都完成了console.log(this.currentLocation.assets)，并且两次都得到了：

未定义

但是，如果我在两个函数中都执行console.log(this.currentLocation)，我会得到一个带有空assets数组的对象作为它的属性。我可以访问该对象的每个其他属性，但我无法访问assets数组。另外，当我在ngOnInit中执行console.log时，我在控制台中得到一个空数组：

console.log(this.currentLocation.assets);

所以，我不知道为什么我会得到这个错误，为什么我得到一个带有空assets数组的对象作为它的属性，但我无法直接访问该对象的属性，我可以访问同一个对象的所有其他属性吗？

这是整个组成部分：

import { Component, OnInit } from '@angular/core';
import { LocationService } from '../services/location.service';


@Component({
  moduleId: module.id,
  selector: 'sd-addresses',
  templateUrl: 'location.component.html'
})
export class LocationsComponent implements OnInit {

  errorMessage: string;
  locations: any[] = [];
  currentLocation: any = {
    assets: any[] = []
  };
  assetsVisible: boolean = false;


  constructor(public locationService: LocationService) {}


  ngOnInit() {
    this.getLocations();
  }


  getLocations() {
    this.locationService.get()
      .subscribe(
        locations => this.locations = locations,
        error => this.errorMessage = <any>error
      );
  }

  select(location = {}) {

    if (this.currentLocation != location || !this.assetsVisible) {
      this.assetsVisible = true;
    }
    else {
      this.assetsVisible = false;
    }

    this.currentLocation = location;

    this.locationService.getAssets(location.Id)
      .subscribe(
        assets => this.currentLocation.assets = assets,
      );
  }

  onItemDrop(e: any, location:any = {}) {
    this.currentLocation.assets = [];
    this.currentLocation.assets.push(e.dragData);
    this.select(location);
  }
}

Answer 1

在你的声明中试试这个：

  locations: any[] = [];
  currentLocation: any = {
     assets: [] 
  };

通过这种方式，您将声明currentLocation为对象类型{}，并且属性assets是数组类型[]。

当将变量声明为对象的属性时，Angular 4 - 绑定不起作用

1 个答案: