Question

我希望能够在点击离子项时更改绿色和红色之间的颜色。

下面的代码从JSON字符串中检索多个名称和颜色，并且它可以正常工作。

  <ion-item *ngFor="let data of data" [style.backgroundColor]="data?.color" (click)="PostData(data)">
    {{data?.name}}
  </ion-item>

但是当我想将数据传递回函数时问题就开始了，所以我可以使用PUT方法将新数据发送回我从中获取JSON字符串的API。

PostData(data) {
    var url = 'http://www.external.tld/page/'+data?.id;  // append the id to the url
    if (data?.color == 'red') {data?.color = 'green'};
    if (data?.color == 'green') {data?.color = 'red'};   // toggle color
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({ headers: headers });
    return this.http.put(url, JSON.stringify({"name": new String(data?.name), "color": new String(data?.color)}), options)
    .map(res => res.json());    // send name and toggled color
}

我是角2的菜鸟，所以我不知道我在做什么是对错。

奖励：我还没有让PUT方法工作（如果可能的话，我甚至更愿意在没有JSON的情况下发送数据（名称和颜色）。）

Answer 1

首先：你不应该将*ngFor的两个变量命名为同一个！

<ion-item *ngFor="let d of data" [style.backgroundColor]="d?.color" (click)="PostData(d)">
  {{d?.name}}
</ion-item>

第二：?.不是有效的Typescript，正如@estus已经提到的那样。是的，当然在你的angular2模板中它是有效的！

但是在Typescript中你必须检查它是否定义了：

PostData(data) {
    if (!data) return; // its null or not defined.. get out of here .. !

    var url = 'http://www.external.tld/page/'+data.id;  // append the id to the url
    if (data.color == 'red') {data.color = 'green'};
    if (data.color == 'green') {data.color = 'red'};   // toggle color
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({ headers: headers });
    return this.http
       // USE x-www-form-urlenoded instead of JSON
       .put(url, `name=${new String(data.name)}&color=${new String(data.color)}`, options)
       .map(res => res.json());    // send name and toggled color
}

Answer 2

您的for循环不正确。绑定到数据数组，并让每个索引处的值等于变量/ letiable“data”。我的猜测是，点击后，您的数据变量不是迭代值，而是整个数据数组。来自PostData（）方法的控制台日志数据。

*ngFor="d of data" [style.backgroundColor]="data.color" (click)="PostData(data)"

将JSON字符串传递给angular2

2 个答案: