将 JSON 字符串传递给 angular2 函数答案

【问题标题】：Pass JSON string to function with angular2将 JSON 字符串传递给 angular2 函数
【发布时间】：2016-12-23 17:27:47
【问题描述】：

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

下面的代码从 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
}

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

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

【问题讨论】：

请说明问题所在。此外，data?.id 不是有效的 Typescript。
在 html 中，我使用 data?.color 和 data?.name 来获取所有名称和颜色的当前索引。我想在 ts 文件中使用相同的数据，但我不知道如何。
说得更简单：如果我单击名称为 test 且颜色为红色的第二个项目。然后我只想在 ts 文件中检索该名称和颜色，将颜色切换为绿色并使用工作 put 函数发送名称和颜色。
@torazaburo 在 PostData 方法的主体中。

标签： angular

【解决方案1】：

首先：您不应该将*ngFor 的两个变量命名相同！

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

第二：@estus 已经提到，?. 不是有效的 Typescript。是的，当然在您的 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
}

【讨论】：

非常感谢！这让我省了很多脑痛！
你能帮我解决奖金问题吗？我无法使 http.put 函数工作（我想将名称和颜色发送到我的 api）。我更喜欢在没有 json 的情况下这样做。通过使用 application/x-www-form-urlencoded 在正文中设置名称和颜色，我让它在邮递员中工作。
您必须像 name=YOURNAME&color=YOURCOLOR 一样设置您的 put-request 的 body。请参阅我的更新答案。
感谢您的回复，但我仍然无法发送数据。我错过了什么吗？链接正确，内容类型正确，名称和颜色作为 x-www-form-urlencoded 发送。为什么它不起作用:(即使我对数据进行硬编码。
我在邮递员中注意到的一件小事是，它不仅将 x-www-form 作为标题发送，而且它也是正文选项卡中的一个选项，位于表单数据、原始数据和二进制数据旁边。我不知道如何处理这些信息，希望你能帮助我:)

【解决方案2】：

您的 for 循环不正确。您绑定到一个数据数组，并让每个索引处的值等于变量/可移动的“数据”。我的猜测是，单击时，您的数据变量不是迭代值，而是整个数据数组。来自 PostData() 方法的控制台日志数据。

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

【讨论】：