Angular Иони c Парсинг / просмотр данных на основе других данных

Question

Я пытаюсь отобразить данные (Дата), основанные на других данных (Статус заказа).

Это текущий вывод, который является неправильным, потому что он отображает все даты в каждом заказе. Определенная дата должна быть напечатана только на каждом заказе, а не на всех.

Вот мой .ts код

constructor(private dataService: DataService, private http: HttpClient) {
  this.data = '';
  this.error = '';
 }

public statuses = [];
public dates = [];

private prepareDataRequest(): Observable<any> {  // <-- change return type here
  // Define the data URL
  const dataUrl = '';
  // Prepare the request
  return this.http.get(dataUrl);
}

ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Set the data to display in the template
      this.statuses = data.output.Result.partsOrderTrackingListSequence
        .map(item => {
          if (item.status && item.status !== '') {
            return item.status;
          } else {
            return '-';
          }
        });
        this.dates = data.output.Result.partsOrderTrackingListSequence
        .map(item => {

          if (item.date && item.date !== '') {
            return item.date;
          } else {
            return '-';
          }
        });
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

Мой стр. html код

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let status of statuses let status of dates">
      {{ status }} - {{dates}}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">{{error}}</span>
    </p>
  </ng-template>

Извинения Я новичок в Angular и Typescript, и я пытаюсь просмотреть и найти доступные руководства, но безуспешно. Если вы можете дать мне какие-нибудь хорошие руководства / ссылки для разбора и отображения данных JSON на Angular Ioni c страниц, а также для изменения формата отображения даты. Это будет очень цениться.

Answer 1

вам нужно изменить ionViewWillEnter() function

OrderList= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.OrderList = data.output.Result.partsOrderTrackingListSequence


    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

Затем в HTML

<ng-container *ngIf=""!error; else errorContent"">
    <p *ngFor=""let order of OrderList;"">
      {{ order.status }} - {{order.dates}}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style=""color: red;"">{{error}}</span>
    </p>
  </ng-template>

Answer 2

Извлечение значений из наблюдаемого в одну массивоподобную структуру вместо отдельных массивов. Используйте этот массив в шаблоне для привязки данных с допустимыми значениями.

Файл шаблона:

// Array which will have the values of orders.
orders= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.orders = data.output.Result.partsOrderTrackingListSequence;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

Файл шаблона

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let order of orders">
      {{ order?.status || '-' }} - {{order?.date || '' }}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">{{error}}</span>
    </p>
  </ng-template>