angular 數組循環使用 ngFor 獲取數組計數並顯示值

Question

我使用下面的 angular 函數顯示了數據

availableLockers = [
    {
      "lockerCode": "L01",
      "allocStatus": "alloc"
    },
    {
      "lockerCode": "L02",
      "allocStatus": "un-alloc"
    },
    {
      "lockerCode": "L03",
      "allocStatus": "un-alloc"
    },
    {
      "lockerCode": "L04",
      "allocStatus": "temp-alloc"
    }, {
      "lockerCode": "L05",
      "allocStatus": "alloc"
},]

我正在使用波紋管 html

<div *ngFor="let locker of availableLockers let i=index;">{{locker.lockerCode}} </div>

上面的代碼運行良好。 目前我需要顯示每個狀態的計數。 例如：有多少個“alloc”狀態的儲物櫃，有多少個“temp-alloc”狀態的儲物櫃。

Answer 1

最好使用reduce為每個allocStatus的計數創建一個字典

然后在 O(1) 時間復雜度的任何地方使用它

 availableLockers = [ { lockerCode: "L01", allocStatus: "alloc", }, { lockerCode: "L02", allocStatus: "un-alloc", }, { lockerCode: "L03", allocStatus: "un-alloc", }, { lockerCode: "L04", allocStatus: "temp-alloc", }, { lockerCode: "L05", allocStatus: "alloc", }, ]; const dict = availableLockers.reduce((acc, { allocStatus }) => { if (acc[allocStatus]) ++acc[allocStatus]; else acc[allocStatus] = 1; return acc; }, {}); console.log(dict["alloc"]); console.log(dict["un-alloc"]); console.log(dict["temp-alloc"]);

Answer 2

您可以嘗試使用 filter()，

let availableLockers = [
  {
    lockerCode: 'L01',
    allocStatus: 'alloc'
  },
  {
    lockerCode: 'L02',
    allocStatus: 'un-alloc'
  },
  {
    lockerCode: 'L03',
    allocStatus: 'un-alloc'
  },
  {
    lockerCode: 'L04',
    allocStatus: 'temp-alloc'
  },
  {
    lockerCode: 'L05',
    allocStatus: 'alloc'
  }
];

function checkStatus(status) {
  let data = availableLockers.filter(locker => locker.allocStatus === status);
  return data.length;
}

console.log(checkStatus('alloc'));
console.log(checkStatus('un-alloc'));
console.log(checkStatus('temp-alloc'));

Answer 3

在 Html 文件中

<div *ngFor="let locker of availableLockers; let i=index;">
 {{locker.lockerCode}}
</div>
<div>{{alloc}}</div>
<div>{{unAlloc}}</div>
<div>{{tempAlloc}}</div>

在 TS 文件中

    alloc:number = 0;
    unAlloc:number = 0;
    tempAlloc:number = 0;
    
    ngOnInit(){
     availableLockers.forEach((value)=>{
     if (value['allocStatus']=='alloc'){
        alloc++}
     elseif (value['allocStatus']=='un-alloc'){
            unAlloc++}
     elseif (value['allocStatus']=='temp-alloc'){
            tempAlloc++}

     })
     }