Question

我想分别绑定货币代码和值

"rates": {
        "USD": 1,
        "AED": 3.672057,
        "ARS": 56.01249,
        "AUD": 1.46368,
        "BGN": 1.77167,
        "BRL": 4.087588,
        "BSD": 1,
        "CAD": 1.320503,
        "CHF": 0.987394,
        "CLP": 716.341326,
        "CNY": 7.13045,
        "COP": 3416.761905,
        "CZK": 23.407844,
        "DKK": 6.757576,
        "DOP": 51.214847,
        "EGP": 16.42298,
        "EUR": 0.906246,
        "FJD": 2.190098,
        "GBP": 0.812305,
        "GTQ": 7.682227,
        "HKD": 7.838661,
        "HRK": 6.706097,
        "HUF": 298.791592,
        "IDR": 14146.297846,
        "ILS": 3.517842,
        "INR": 71.751368,
        "ISK": 126.170061,
        "JPY": 106.936393,
        "KRW": 1194.541725,
        "KZT": 387.848649,
        "MXN": 19.613284,
        "MYR": 4.184189,
        "NOK": 8.99096,
        "NZD": 1.561619,
        "PAB": 1,
        "PEN": 3.352305,
        "PHP": 51.899054,
        "PKR": 156.32244,
        "PLN": 3.930302,
        "PYG": 6522.909091,
        "RON": 4.285713,
        "RUB": 65.941596,
        "SAR": 3.75059,
        "SEK": 9.657741,
        "SGD": 1.382595,
        "THB": 30.646268,
        "TRY": 5.701489,
        "TWD": 31.23947,
        "UAH": 24.982101,
        "UYU": 36.570846,
        "VND": 23112.280702,
        "ZAR": 14.803694
    }

这是我的看法：

 <a class="dropdown-item w-r" *ngFor="let cur of currencies?.rates" (click)="onCurrency(cur)" >{{cur}}</a>

错误：

找不到类型不同的支持对象“ [object Object]” '宾语'。 NgFor仅支持绑定到数组等Iterable。

Answer 1

您可以尝试使用键值管道：

<a class="dropdown-item w-r" *ngFor="let cur of currencies?.rates | keyvalue" (click)="onCurrency(cur)" ><br>{{cur.key}}:{{cur.value}}</a>

demo ??

Answer 2

要使用ngFor，您需要将Object转换为Object数组。在.TS

上执行以下操作

let curr = {
  "rates": {
    "USD": 1,
    "AED": 3.672057,
    "ARS": 56.01249,
    "AUD": 1.46368,
    "BGN": 1.77167,
    "BRL": 4.087588,
    "BSD": 1,
    "CAD": 1.320503,
    "CHF": 0.987394,
    "CLP": 716.341326,
    "CNY": 7.13045,
    "COP": 3416.761905,
    "CZK": 23.407844,
    "DKK": 6.757576,
    "DOP": 51.214847,
    "EGP": 16.42298,
    "EUR": 0.906246,
    "FJD": 2.190098,
    "GBP": 0.812305,
    "GTQ": 7.682227,
    "HKD": 7.838661,
    "HRK": 6.706097,
    "HUF": 298.791592,
    "IDR": 14146.297846,
    "ILS": 3.517842,
    "INR": 71.751368,
    "ISK": 126.170061,
    "JPY": 106.936393,
    "KRW": 1194.541725,
    "KZT": 387.848649,
    "MXN": 19.613284,
    "MYR": 4.184189,
    "NOK": 8.99096,
    "NZD": 1.561619,
    "PAB": 1,
    "PEN": 3.352305,
    "PHP": 51.899054,
    "PKR": 156.32244,
    "PLN": 3.930302,
    "PYG": 6522.909091,
    "RON": 4.285713,
    "RUB": 65.941596,
    "SAR": 3.75059,
    "SEK": 9.657741,
    "SGD": 1.382595,
    "THB": 30.646268,
    "TRY": 5.701489,
    "TWD": 31.23947,
    "UAH": 24.982101,
    "UYU": 36.570846,
    "VND": 23112.280702,
    "ZAR": 14.803694
  }
};

const mapped = Object.keys(curr.rates).map(key => ({type: key, value: curr.rates[key]}));

console.log(mapped);

Answer 3

我从您那里了解到，您正在尝试通过ngFor进行迭代以显示json中的所有数据我建议您在后面的代码中解析该json并在“结果”对象中进行迭代就像：

在代码后解析您的json
为结果属性键创建吸气剂

get Resultkeys（）{返回Object.keys（result）; }
创建获取给定键值的函数

getResultKeyValue（key）{返回结果[key]; }
在您的html代码中使用ngFor迭代ResultKeys
显示{{getResultKeyValue（key）}}

Answer 4

使用Object.entries

Object.entries（obj）–返回[键，值]对的数组。

var cur = { "USD": 1, "AED": 3.672057, "ARS": 56.01249, "AUD": 1.46368, "BGN": 1.77167, "BRL": 4.087588, "BSD": 1, "CAD": 1.320503, "CHF": 0.987394, "CLP": 716.341326, "CNY": 7.13045, "COP": 3416.761905, "CZK": 23.407844, "DKK": 6.757576, "DOP": 51.214847, "EGP": 16.42298, "EUR": 0.906246, "FJD": 2.190098, "GBP": 0.812305, "GTQ": 7.682227, "HKD": 7.838661, "HRK": 6.706097, "HUF": 298.791592, "IDR": 14146.297846, "ILS": 3.517842, "INR": 71.751368, "ISK": 126.170061, "JPY": 106.936393, "KRW": 1194.541725, "KZT": 387.848649, "MXN": 19.613284, "MYR": 4.184189, "NOK": 8.99096, "NZD": 1.561619, "PAB": 1, "PEN": 3.352305, "PHP": 51.899054, "PKR": 156.32244, "PLN": 3.930302, "PYG": 6522.909091, "RON": 4.285713, "RUB": 65.941596, "SAR": 3.75059, "SEK": 9.657741, "SGD": 1.382595, "THB": 30.646268, "TRY": 5.701489, "TWD": 31.23947, "UAH": 24.982101, "UYU": 36.570846, "VND": 23112.280702, "ZAR": 14.803694 }

Object.entries(cur).forEach(obj => console.log(`${obj[0]} ${obj[1]}`));

如何将逗号分隔的对象类型添加到NgFor循环中？

4 个答案: