使用Angular2中的接口将对象推送到新数组中

Posted 2023-02-23

【中文标题】使用Angular2中的接口将对象推送到新数组中

【英文标题】：Push object into new array with interfaces in Angular2

【发布时间】：2016-04-03 11:43:44

【问题描述】：

我正在从 Angular2 中的服务中检索对象列表。

单击时，我想将对象从我的 ngFor 放到一个新数组中（具有相同的界面）。

我能够很好地显示包含项目的列表。我还可以在控制台中显示我选择的项目，但我无法将此对象推送到具有相同界面的新数组中。

我的界面：

export interface Item 
    id: string,
    name: string,
    icon_url: string,
    exterior: string,
    type: string,
    tag: string,
    addedClass: string,
    selected: boolean

我的组件：

import Component, OnInit, DoCheck from 'angular2/core';
import Item from './../interfaces/interfaces.ts';
import ItemService from './../services/item.service.ts';


@Component(
    template: `
        <h2>Add item</h2>
        <div class="itemlist">
            <ul class="items">
                <li 
                    *ngFor="#item of items"
                    [class.selected]="item === selectedItem"
                    (click)="onSelect(item)"
                >
                    <span class="item">
                        item.name
                    </span>
                </li>
            </ul>
        </div>
    `
)

export class AddTradeComponent implements OnInit 

    public items: Item[];
    public selectedItems: Item[];


    constructor(private _itemService: ItemService)  

    getUserItems() 
        this._itemService.getUserItems().then(userItems => this.items = userItems);
    
    

    ngOnInit() 
        this.getUserItems();
    

    onSelect(item) 
        console.log('items ', item);
        this.selectedItems.push(item);
    

我遇到的错误：

评估“点击”时出错

TypeError: 无法读取未定义的属性“push”

记录对象工作正常，我只是无法将它推送到 this.selectedItems。

【问题讨论】：

那是因为你还没有初始化属性。改成public selectedItems: Item[] = [];

【参考方案1】：

你没有初始化你的数组。在声明成员变量时初始化数组：

public items: Item[] = [];
public selectedItems: Item[] = [];

或者在你的构造函数中初始化它们：

constructor() 
    this.items = [];
    this.selectedItems = [];

【讨论】：

哇老兄，这么简单啊。万分感谢！快速的问题。填充 items 数组虽然有效，但也没有初始化。它是如何工作的？