在html模板中将字符串转换为angular2中的数组

我得到了这样的Json回复

var optCities = [{
"resultData": {
"Hoteloption": [
    {   
        "CityRating":"[
        {'City': 'Bangkok','Rating':4.5},
        {'City': 'Phuket','Rating':4.5},
        {'City': 'Nonthaburi','Rating':4.5},
        {'City': 'Broc','Rating':4.5}]"
    }]
}}];

我已经尝试创建一个管道

transform(value: any, args?: any): any {
    var st = JSON.stringify(value);
    var result =  JSON.parse(st);
    return result;
  }

首先尝试创建json对象。 但是如果我控制台

结果
变量，它仍然显示string

<div *ngFor="let city of optCities[0].resultData.Hoteloption[0].CityRating | strReplace ;let i = index; ">
    {{city.Rating}}
</div>


{{city.Rating}

我错过了什么
 这是因为您的JSON对象是错误的。从CityRating中的数组中删除双引号

var optCities = [{
"resultData": {
"Hoteloption": [
{   
    "CityRating":[
    {'City': 'Bangkok','Rating':4.5},
    {'City': 'Phuket','Rating':4.5},
    {'City': 'Nonthaburi','Rating':4.5},
    {'City': 'Broc','Rating':4.5}]
}]
}}];

这是因为您的JSON对象是错误的。从CityRating中的数组中删除双引号

var optCities = [{
"resultData": {
"Hoteloption": [
{   
    "CityRating":[
    {'City': 'Bangkok','Rating':4.5},
    {'City': 'Phuket','Rating':4.5},
    {'City': 'Nonthaburi','Rating':4.5},
    {'City': 'Broc','Rating':4.5}]
}]
}}];

不确定，但莫比

transform(value: any, args?: any): any {
    return JSON.parse(value);
}

这是指数组必须是字符串，但不能确定

transform(value: any, args?: any): any {
    return JSON.parse(value);
}

这是如果您的数组必须是字符串，那么您从服务器获取的CityRating数组的JSON不正确

这里有一个解决办法
在组件中定义函数

getJson(x){
  let z = x.replace(/'/g, '"');
  return JSON.parse(z);
}

要在模板中使用

<div *ngFor="let city of 
getJson(optCities[0].resultData.Hoteloption[0].CityRating);let i = 
 index; ">
  {{city.Rating}}
</div>


{{city.Rating}

该函数将返回一个有效的JSON数组，这样您的循环就可以工作了
您从服务器上得到的CityRating数组的JSON不正确

这里有一个解决办法
在组件中定义函数

getJson(x){
  let z = x.replace(/'/g, '"');
  return JSON.parse(z);
}

要在模板中使用

<div *ngFor="let city of 
getJson(optCities[0].resultData.Hoteloption[0].CityRating);let i = 
 index; ">
  {{city.Rating}}
</div>


{{city.Rating}

函数将返回一个可用的JSON数组，这样循环就可以工作了
嵌套的对象键应该用双qoutes而不是单qoutes包装，最好从后端解决这个问题，下面是一些简单的解决方案

角管

transform(value: any, args?: any): any {
    // i'm guessing that your data (value) is string
    return typeof value==='string' ? JSON.parse(value.replace(/'/g, '"')) : value;
}

您的嵌套对象键应该用双qoutes而不是单qoutes包装，最好从后端解决这个问题，这里有一些简单的解决方案，可以用JS来解决这个问题

角管

transform(value: any, args?: any): any {
    // i'm guessing that your data (value) is string
    return typeof value==='string' ? JSON.parse(value.replace(/'/g, '"')) : value;
}

你能创建一个plunker吗？@RahulSingh我已经创建了JSIDLE，它和我正在尝试的是一样的：st.json（）['resultData']；你能创建一个plunker吗？@RahulSingh我已经创建了JSIDLE，它和我正在尝试的是一样的：st.json（）['resultData']；这就是问题所在，我无法改变从APIany其他解决方案的响应中获取的问题？这就是问题所在，我无法改变从APIany其他解决方案的响应中获取的问题？这不起作用，在JSON中获取位置2的意外标记不起作用，在位置2获取JSON中的意外标记如何在angular2中执行此操作？如何在angular2中执行此操作？