【问题标题】:Add new object to array angular将新对象添加到数组角度
【发布时间】:2019-01-29 15:00:41
【问题描述】:

我正在尝试在 API 调用后将 JSON 对象放入数组中。

首先我进行了 API 调用,然后尝试将每个用户添加到格式化的 JSON 对象中。

connectionProvider.ts

import { UserModelProvider } from './../user-model/user-model';
import { MSAdal, AuthenticationContext, AuthenticationResult } from '@ionic-native/ms-adal';

export class MsConnectionProvider {
  userInfo : UserModelProvider;
  users: UserModelProvider[];

 constructor(...) {}

getUserInfo(){
    let header = new Headers({
      Authorization: this.accessToken;
    });
    let options = new RequestOptions({headers: header});

    this.usersSubscription = this.http.get("https://graph.microsoft.com/v1.0/groups/**ID**/members", options).map(res => res.json()['value']);
    this.usersSubscription.subscribe(res => {
      for (let user of res){
        this.addUserInfo(user.displayName, user.jobTitle, "something", user.mail);
      }
    });
  }

 addUserInfo(name, job, departement, mail){
    this.userInfo = new UserModelProvider;

    this.userInfo.name = name;
    this.userInfo.job = job;
    this.userInfo.departement = departement;
    this.userInfo.mail = mail;

    this.users.push(this.userInfo);
  }
}

userModelProvider.ts

export class UserModelProvider {
  name: string;
  job: string;
  departement: string;
  mail: string;
  photo: any;
}

问题是当我尝试将“this.userInfo = new UserModelProvider”推入 this.users 数组功能块时,没有任何反应。

我当然不明白这门课,你能帮帮我吗?

谢谢。

【问题讨论】:

  • 使用new UserModelProvider();

标签: javascript angular ionic-framework ionic3


【解决方案1】:

您无法推送到尚未初始化的数组。

你需要改变:

users: UserModelProvider[]

到:

users: UserModelProvider[] = [];

还有(可能有帮助,也可能没有帮助):

可能什么都没有发生,因为 push 会改变数组,因此可能无法进行角度变化检测。

不使用推送,而是使用以下命令创建一个新数组:

this.users = [...this.users, this.userInfo]

或者在 ES5 中:

this.users = this.users.concat([this.userInfo])

【讨论】:

  • 谢谢!问题是用户的声明。它现在与 push 方法完美配合。
【解决方案2】:

在赋值之前创建一个类的实例,

this.userInfo = new UserModelProvider();

【讨论】:

  • 这是正确的,但您的代码还有其他问题,请参阅我的更新答案
猜你喜欢
  • 2019-06-26
  • 1970-01-01
  • 2016-01-14
  • 1970-01-01
  • 2022-01-16
  • 1970-01-01
  • 2017-07-12
  • 1970-01-01
  • 2020-10-28
相关资源
最近更新 更多