如何使用* ngFor指令在Angular6中从ts到html访问json数组

Question

I am trying to access this array:

 currencies: [{"id":1,"name":"AED"}, {"id":2,"name":"AFN"}, {"id":3,"name":"ALL"},
  {"id":4,"name":"AMD"}, {"id":5,"name":"ANG"}, {"id":6,"name":"AOA"}, {"id":7,"name":"ARS"}, {"id":8,"name":"AUD"}, {"id":9,"name":"AWG"}, {"id":10,"name":"AZN"}, {"id":11,"name":"BAM"}, {"id":12,"name":"BBD"}, {"id":13,"name":"BDT"}, {"id":14,"name":"BGN"}, {"id":15,"name":"BHD"}, {"id":16,"name":"BIF"}, {"id":17,"name":"BND"}, {"id":18,"name":"BOB"}, {"id":19,"name":"BRL"}, {"id":20,"name":"BSD"}, {"id":21,"name":"BTC"}, {"id":22,"name":"BTN"}, {"id":23,"name":"BWP"}, {"id":24,"name":"BYN"}, {"id":25,"name":"BYR"}, {"id":26,"name":"BZD"}, {"id":27,"name":"CAD"}, {"id":28,"name":"CDF"}, {"id":29,"name":"CHF"}, {"id":30,"name":"CLP"}, {"id":31,"name":"CNY"}, {"id":32,"name":"COP"}, {"id":33,"name":"CRC"}, {"id":34,"name":"CUP"}, {"id":35,"name":"CVE"}, {"id":36,"name":"CZK"}, {"id":37,"name":"DJF"}, {"id":38,"name":"DKK"}, {"id":39,"name":"DOP"}, {"id":40,"name":"DZD"}, {"id":41,"name":"EGP"}, {"id":42,"name":"ERN"}, {"id":43,"name":"ETB"}, {"id":44,"name":"EUR"}, {"id":45,"name":"FJD"}, {"id":46,"name":"FKP"}, {"id":47,"name":"GBP"}, {"id":48,"name":"GEL"}, {"id":49,"name":"GHS"}, {"id":50,"name":"GIP"}, {"id":51,"name":"GMD"}, {"id":52,"name":"GNF"}, {"id":53,"name":"GTQ"}, {"id":54,"name":"GYD"}, {"id":55,"name":"HKD"}, {"id":56,"name":"HNL"}, {"id":57,"name":"HRK"}, {"id":58,"name":"HTG"}, {"id":59,"name":"HUF"}, {"id":60,"name":"IDR"}, {"id":61,"name":"ILS"}, {"id":62,"name":"INR"}, {"id":63,"name":"IQD"}, {"id":64,"name":"IRR"}, {"id":65,"name":"ISK"}, {"id":66,"name":"JMD"}, {"id":67,"name":"JOD"}, {"id":68,"name":"JPY"}, {"id":69,"name":"KES"}, {"id":70,"name":"KGS"}, {"id":71,"name":"KHR"}, {"id":72,"name":"KMF"}, {"id":73,"name":"KPW"}, {"id":74,"name":"KRW"}, {"id":75,"name":"KWD"}, {"id":76,"name":"KYD"}, {"id":77,"name":"KZT"}, {"id":78,"name":"LAK"}, {"id":79,"name":"LBP"}, {"id":80,"name":"LKR"}, {"id":81,"name":"LRD"}, {"id":82,"name":"LSL"}, {"id":83,"name":"LVL"}, {"id":84,"name":"LYD"}, {"id":85,"name":"MAD"}, {"id":86,"name":"MDL"}, {"id":87,"name":"MGA"}, {"id":88,"name":"MKD"}, {"id":89,"name":"MMK"}, {"id":90,"name":"MNT"}, {"id":91,"name":"MOP"}, {"id":92,"name":"MRO"}, {"id":93,"name":"MUR"}, {"id":94,"name":"MVR"}, {"id":95,"name":"MWK"}, {"id":96,"name":"MXN"}, {"id":97,"name":"MYR"}, {"id":98,"name":"MZN"}, {"id":99,"name":"NAD"}, {"id":100,"name":"NGN"}, {"id":101,"name":"NIO"}, {"id":102,"name":"NOK"}, {"id":103,"name":"NPR"}, {"id":104,"name":"NZD"}, {"id":105,"name":"OMR"}, {"id":106,"name":"PAB"}, {"id":107,"name":"PEN"}, {"id":108,"name":"PGK"}, {"id":109,"name":"PHP"}, {"id":110,"name":"PKR"}, {"id":111,"name":"PLN"}, {"id":112,"name":"PYG"}, {"id":113,"name":"QAR"}, {"id":114,"name":"RON"}, {"id":115,"name":"RSD"}, {"id":116,"name":"RUB"}, {"id":117,"name":"RWF"}, {"id":118,"name":"SAR"}, {"id":119,"name":"SBD"}, {"id":120,"name":"SCR"}, {"id":121,"name":"SDG"}, {"id":122,"name":"SEK"}, {"id":123,"name":"SGD"}, {"id":124,"name":"SHP"}, {"id":125,"name":"SLL"}, {"id":126,"name":"SOS"}, {"id":127,"name":"SRD"}, {"id":128,"name":"STD"}, {"id":129,"name":"SYP"}, {"id":130,"name":"SZL"}, {"id":131,"name":"THB"}, {"id":132,"name":"TJS"}, {"id":133,"name":"TMT"}, {"id":134,"name":"TND"}, {"id":135,"name":"TOP"}, {"id":136,"name":"TRY"}, {"id":137,"name":"TTD"}, {"id":138,"name":"TWD"}, {"id":139,"name":"TZS"}, {"id":140,"name":"UAH"}, {"id":141,"name":"UGX"}, {"id":142,"name":"USD"}, {"id":143,"name":"UYU"}, {"id":144,"name":"UZS"}, {"id":145,"name":"VEF"}, {"id":146,"name":"VND"}, {"id":147,"name":"VUV"}, {"id":148,"name":"WST"}, {"id":149,"name":"XAF"}, {"id":150,"name":"XCD"}, {"id":151,"name":"XDR"}, {"id":152,"name":"XOF"}, {"id":153,"name":"XPF"}, {"id":154,"name":"YER"}, {"id":155,"name":"ZAR"}, {"id":156,"name":"ZMW"}];

using like this:

<div class="dropdown">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
  Compare it in your local currency:</button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor="let x of currencies"><a class="dropdown-item" href="#">{{x.name}}</a></div></div>

But the same in not accessible using this.

Answer 1

If currency is a string, it won't work. You'll need to parse it into an array, as ngFor only works with arrays.