Как отобразить json данные из API в табличной форме? "https://api.covid19india.org/travel_history.json"

Question

Файл Component.ts введите описание изображения здесь

Как вывести данные сверху api json данные в табличную форму? Требуются ли какие-либо изменения? Когда я служу Angular данные проекта должны отображаться в табличной форме из API.

<table border="2">
    <thead>
        <tr>
           <th colspan="11"> Travel History </th>
            
        </tr>
        <tr>
            <th>_CN6CA</th>
            <th>Accuracy Location</th>
            <th>Address</th>
            <th>Datasource</th>
            <th>Latlong</th>
            <th>Mode of Travel</th>
            <th>Pid</th>
            <th>Place Name</th>
            <th>Time From</th>
            <th>Time to</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let x of result";*ngFor = " let y of x ">
            <td>{{y._cn6ca}}</td>
            <td>{{y.accuracylocation}}</td>
            <td>{{y.address}}</td>
            <td>{{y.datasource}}</td>
            <td>{{y.latlong}}</td>
            <td>{{y.modeoftravel}}</td>
            <td>{{y.pid}}</td>
            <td>{{y.placename}}</td>
            <td>{{y.timefrom}}</td>
            <td>{{y.timeto}}</td>
            <td>{{y.type}}</td>

        </tr>
    </tbody>
</table>

Answer 1

В ваш файл TS вы добавляете логическое значение и отображаете данные после ответа. Вам не нужен второй l oop, просто установите
this.result = response.travel_history;

ts

isDataLoaded: boolean = false;
public result;

ngOnInit(){
   this.service.getData().subscribe(response => {
   this.result = response.travel_history;
   this.isDataLoaded = true;
   }); 
 }

html

<tbody *ngIf="isDataLoaded">
    <tr *ngFor="let x of result">
        <td>{{x._cn6ca}}</td>
        <td>{{x.accuracylocation}}</td>
        <td>{{x.address}}</td>
        <td>{{x.datasource}}</td>
        <td>{{x.latlong}}</td>
        <td>{{x.modeoftravel}}</td>
        <td>{{x.pid}}</td>
        <td>{{x.placename}}</td>
        <td>{{x.timefrom}}</td>
        <td>{{x.timeto}}</td>
        <td>{{x.type}}</td>

    </tr>
</tbody>