如何将 JSON 到表的数据限制为 Angular 中的某些行？

Question

I'm extracting data from the server in the form of JSON and adding it to the HTML table. I want to fix the table rows to 5 and only the top 5 value from JSON should go into table using Angular. If there are less than 5 data available, fill the table columns with '-'.

component.ts

import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-orderbook',
  templateUrl: './orderbook.component.html',
  styleUrls: ['./orderbook.component.css']
})
export class OrderbookComponent implements OnInit {
  title = 'JSON to Table Example';
  constructor (private httpService: HttpClient) { }
  arrBirds: string [];
  

  ngOnInit() {
    this.httpService.get('http://localhost:7000/orders/list').subscribe(
      data => {
        this.arrBirds = data as string [];   // FILL THE ARRAY WITH DATA.
         //console.log(this.arrBirds[1]);
      },
      (err: HttpErrorResponse) => {
        //console.log (err.message);
      }
    );
  }
  }

component.html

      <div style="text-align:left;width:500px;">
        <h1>
            {{ title }}!
        </h1>
        
        <table *ngIf="arrBirds">
            
              <tr>
                <th>Order ID</th>
                <th>Type</th>
                <th>Category</th>
                <th>Quantity</th>
                <th>Price</th>
              </tr>
          
          <tr *ngFor="let bird of arrBirds">
            <td>{{bird.orderId}}</td>
            <td>{{bird.type}}</td>
            <td>{{bird.category}}</td>
            <td>{{bird.quantity}}</td>
            <td>{{bird.price}}</td>
          </tr>
      </table>
    </div>

component.css

table {
    border-collapse: collapse;
    width: 95%;
    margin:0 0 0 20px;
  }
  
  table, th, td {
    border: 1px solid black;
  }

Answer 1

One simple way of achieving this would be to initialize your Array with a given length:

arrBirds = Array.from({length: 5});

Then you can assign your data to this array

if (data) {
    data.forEach((bird, index) => {
        this.arrBirds[index] = bird;
    });
}

Slightly adapt your display to handle null values:

          <tr *ngFor="let bird of arrBirds">
            <td>{{ bird?.orderId || '-' }}</td>
            <td>{{ bird?.type || '-' }}</td>
            <td>{{ bird?.category || '-' }}</td>
            <td>{{ bird?.quantity || '-' }}</td>
            <td>{{ bird?.price || '-' }}</td>
          </tr>

And you should be good to go !

Answer 2

This sort of data manipulation should be done in the component (or preferably a separate service).

You can write a function in your OrderbokComponent to get the top 5 birds (based on your custom criteria, price / quantity, etc), store that in a variable and use that to generate the list.

You can even sort the arrBirds array and do something like this in ngFor :

<tr *ngFor="let bird of arrBirds | slice:0:4">
            <td>{{ bird?.orderId || '-' }}</td>
            <td>{{ bird?.type || '-' }}</td>
            <td>{{ bird?.category || '-' }}</td>
            <td>{{ bird?.quantity || '-' }}</td>
            <td>{{ bird?.price || '-' }}</td>
          </tr>