Question

我目前正在使用角度2并通过api接收我的json数据。我收到了以下格式的数据。

{
    "totalItems": 2719,
    "totalPages": 272,
    "results": [
        {
            "SNR_Title": "Acer - 11 11.6\" Refurbished Chromebook - Intel Celeron - 4GB Memory - 16GB eMMC Flash Memory - Gray",
            "SNR_Brand": "Acer",
            "SNR_Description": "Refurbished Acer 11 Chromebook: Slip the Acer Chromebook into your bag and work from anywhere, without recharging, because it has enough battery life to last for a long time on a single charge.  Learn more about refurbished products &#8250;  Learn more about Chromebooks &#8250;",
            "SNR_ImageURL": "https://img.bbystatic.com/BestBuy_US/images/products/5676/5676707_sa.jpg",
            "SNR_ModelNo": "NX.GC1AA.002",
            "SNR_UPC": "841631108389",
            "SNR_SKU": "5676707",
            "SNR_ProductURL": "https://api.bestbuy.com/click/-/5676707/pdp",
            "SNR_Price": "169.99",
            "SNR_Available": "BESTBUY"
        },
        {
            "SNR_Title": "Acer - 11.6\" Chromebook - Intel Celeron - 2GB Memory - 16GB eMMC Flash Memory - White",
            "SNR_Brand": "Acer",
            "SNR_Description": "Acer Chromebook: Browse the Internet and tackle work or school projects with this Acer Chromebook. An 11.6-inch LED backlit display and an Intel HD graphics card provide a rich viewing experience for images and video, and a built-in webcam lets you place video calls with crisp clarity. With its compact size and 9-hour battery life, this Acer Chromebook is ideal for travel.  Learn more about Chromebooks &#8250;",
            "SNR_ImageURL": "https://img.bbystatic.com/BestBuy_US/images/products/4963/4963801_sa.jpg",
            "SNR_ModelNo": "CB3131C3SZ",
            "SNR_UPC": "888863408634",
            "SNR_SKU": "4963801",
            "SNR_ProductURL": "https://api.bestbuy.com/click/-/4963801/pdp",
            "SNR_Price": "179.0",
            "SNR_Available": "BESTBUY"
        }
]
}

和我收到的服务或.ts类看起来像这样。

GetAllMobile:Object
  constructor(private httpService: HttpService) {
        this.httpService.getAllMobiles(1).subscribe(
    data => {
      const myArray = [];


      for (let key in data) {
        myArray.push(data[key]);

// console.log(this.GetAllMobile)
      }
        this.GetAllMobile=(myArray) 
    }
  );

但是我无法在我的html中阅读GetAllMobile.results，但我可以使用像GetAllMobile这样的索引来访问它[2]。到目前为止我所尝试的是。

//Not worked
    <div *ngFor="let item of GetAllMobile">
      <h2>
          Total {{item.totalItems}} {{item.totalPages}} AMAD
      </h2>
          <div *ngFor="let x of item.results">
        <p>
            {{x.SNR_Title}}
        </p>
      </div>
    </div>


//this woked but i don't needed this approach
<div *ngFor="let mobile of GetAllMobile[2]">
    <h2>{{ mobile.SNR_Title}}</h2>
   </div>

但我可以通过索引阅读。但由于某些原因，我想按键读取数据。有些人可以告诉我在角度2中读取这些数据的正确方法。任何帮助或建议都非常感谢。

Answer 1

尝试像这样声明GetAllMobile：

<?php
function my_custom_address ( $formats ) {
     $formats = array( 
        'default' => '<span class="my-address-country"></span>
                      <span class="my-address-city"></span>'
     ); 
     return $formats; 
} 
add_filter( 'default_address_formats', 'my_custom_address', 15 ) ;
?>

希望这会对你有所帮助:)

Answer 2

你试图让事情变得复杂一点：）

您可以直接指定您获得的响应，无需尝试循环它。所以就这样做：

this.httpService.getAllMobiles(1).subscribe(data => {
   this.GetAllMobiles = data;
})

然后您的模板将如下所示。请注意，我们正在删除第一次迭代，因为没有任何内容可以迭代。 GetAllMobile是一个对象。我们保留的第二次迭代，因为您想迭代对象内的results数组。

<h2>Total {{GetAllMobile?.totalItems}} {{GetAllMobile?.totalPages}} AMAD</h2>
<div *ngFor="let x of GetAllMobile?.results">
  <p>{{x.SNR_Title}}</p>
</div>

请注意 safe navigation operator 的使用。它保护null和undefined属性路径。由于数据是异步的，因此最好使用安全导航操作符。在这种情况下，这也可以通过初始化变量GetAllMobile来解决，但了解魔法异步世界中的安全导航操作符很有用：）

最后，这是一个 DEMO

为什么我不能通过使用键而不是索引angular 2来读取json数据？

2 个答案: