Question

我对angular并不陌生，并尝试制作一个我有两个组成部分State和District组件的angular中的COVID 19应用程序。

状态组件正在列出表中的所有状态，当我单击任何状态时，它正在加载该状态下的所有区域列表。

这是我的工作链接：working link。

我期望的参考：expected result link

当我单击表的“区”列时，我想按升序或降序对特定状态的区数据进行排序（切换），但是我无法以任何方式对数据进行排序。一旦我能够按升序排序，就可以将其写为降序。

我遇到错误：

core.js：6185错误TypeError：districtdata.sort不是函数

这是我在特定状态下作为Json响应获取的数据

data.Json

{
  "Pune": {
    "confirmed": 63,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Mumbai": {
    "confirmed": 198,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Nagpur": {
    "confirmed": 12,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Thane": {
    "confirmed": 10,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Ahmadnagar": {
    "confirmed": 19,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  }
}

District.component.ts

 ngOnInit(): void {
    this.cs.districtdata.subscribe(data=>{
      this.districtdata=data
      console.log(data)
    })

  }

  sortDistrict(districtdata){
    this.isAscendingSort=true;
  const x= districtdata.sort((a, b) => a.localeCompare(b))
   console.log(x)
  }

District.component.html

<div class="district-heading">
    <th (click)="sortDistrict(districtdata)">
        <div class="heading-content">
            <abbr class="dist" title="District">District</abbr>
        </div>
    </th>
    <th>
        <div class="heading-content">
            <abbr class="confirmed" title="Confirmed">Confirmed</abbr>
        </div>
    </th>
</div>

Answer 1

您的districtdata是一个对象。如果要排序列表，则需要将其转换为数组：

const districtData = {
/* your district data */
};

let newArr = [];
Object.keys(districtData).forEach((key, index) => {
 newArr.push(districtData[key]);
});

sort（）是数组上的一个函数（此外，您不能/不应尝试对对象进行排序或根据其顺序进行假设。

编辑：这段代码在对象中包含stateName，并根据它对新数组进行排序：

const districtData = {
  /* your district data */
};

let districtDataArray = [];
Object.keys(districtData).forEach((key, index) => {
  districtDataArray.push(
    Object.assign({}, { districtName: key }, districtData[key])
  );
});

compare = (a, b) => {
  return a.districtName.localeCompare(b.districtName);
};

districtDataArray.sort(compare);

注意能够根据角度/打字稿中对象的键升序/降序对数据进行排序

1 个答案: