如何将对象放入另一个对象Angular / Javascript答案

【问题标题】：How to put object into another object Angular / Javascript如何将对象放入另一个对象Angular / Javascript
【发布时间】：2016-07-05 07:54:00
【问题描述】：

我正在制作一个应用程序，但在尝试将一个数组推入另一个数组时遇到了问题。我收到一个错误“无法读取未定义的属性‘push’。”

这是对象：

export var CARDS: any[] = [
     {
        channel: "facebook"
        date: "2016-01-07"
        comments: [
            { 
               content: "Hey would you look at this card?",
               user: "John Appleseed",
               avatar: "url"
            },
            { 
               content: "I like this card!",
               user: "John Doe",
               avatar: "url"
            }
        ]
     },
     {
        channel: "facebook"
        date: "2016-01-07"
        comments: [
            { 
               content: "Hey would you look at this card?",
               user: "Jane Doe",
               avatar: "url"
            }
        ]
    }];

我的应用中有一个选项可以向卡片添加评论。因此我创建了：

newComment = {
    content: "",
    user: "",
    avatar: ""
  };

我用一个按钮调用 submitComment 函数：

submitComment(comment) {
    console.log(this.newComment);
    this.comment.push(newComment);
}

我的 HTML 看起来像这样（仅供参考：我正在使用 ionic，这解释了离子输入）

 <ion-input type="text" placeholder="Type a comment..."  [(ngModel)]="newComment.content"></ion-input> 
 <button (click)="submitComment(comment)">Send comment</button>

我在 submitComment 函数中做了一个 console.log，它显示了正确的信息。但是推送不起作用。我收到一个错误“无法读取未定义的属性“推送”。我在括号之间尝试了“this.newComment”，但它也不起作用。

我刚刚开始了解 Angular/JS，所以这可能是一些我无法弄清楚的简单事情。提前感谢您的帮助:-)

编辑：我忘了补充。我做了一个 *ngFor="let comment of card.cmets" 来显示所有 cmets。因此，我只是在进一步的 HTML 中使用“注释”。

【问题讨论】：

您有重复的密钥。这将覆盖以前的值。

标签： javascript arrays angularjs angular ionic2

【解决方案1】：

您的问题是因为您提供给submitComment 方法的comment 变量为空。所以你不能在上面调用任何方法（特别是push）...

否则您的CARDS 属性似乎没有正确定义。你会这样定义它：

CARDS: any [] = [
  {
    channel: "facebook"
    date: "2016-01-07"
    comments: [
      { 
        content: "Hey would you look at this card?",
        user: "John Appleseed",
        avatar: "url"
      },
      { 
        content: "I like this card!",
        user: "John Doe",
        avatar: "url"
      }
    ]
  },
  {
    channel: "facebook"
    date: "2016-01-07"
    comments: [
      { 
        content: "Hey would you look at this card?",
        user: "Jane Doe",
        avatar: "url"
      }
    ]
  }
];

【讨论】：

感谢蒂埃里这么快的回复！你会推荐什么？如何将 newComment 数组推送到我现有的 card.cmets？
不客气！只需将其放入数组中；-) 在您的 submitComment 方法中类似这样的内容：card.comments.push(this.newComponent);。我不知道card 来自哪里，但是您需要能够从组件本身引用它，或者通过将其作为方法的参数提供（例如，如果它在 ngFor 中）...

【解决方案2】：

感谢蒂埃里，我解决了我的问题。 :-) 我在我的代码中查看了一些小东西。这是解决方案，适用于遇到相同问题的每个人。

我的问题是在我使用 click 函数给出的值范围内。我第一次有

(click)="submitComment(comment)"

但“评论”未定义。我以为我的 ngFor="let comment of card.cmets" 会定义它，但我的点击功能在 ngFor 之外。因此我不得不创建

(click)="submitComment(card)"

在我的打字稿文件中：

 submitComment(card) {
    console.log(this.newComment);
    card.comments.push(this.newComment);
  }

【讨论】：