Блог

Я хотел бы использовать флажок для отображения элементов в таблице, для которой установлен статус «ошибка» при возврате вызова API json.

Json отправляет мне что-то вроде этого, с вложенными элементами:

 {
  "type": "firstEl",
  "firstTeam": {
    "date": "2020-10-14T14:36:12.859Z",
    "item": {
      "organizationCode": "THUG",
      "status": "success"
    },
    "secondTeam": {
      "date": "2020-10-14T14:36:12.859Z",
      "item": {
        "organizationCode": "THUG",
        "status": "success"
      }
    }
  }
}
  

Я пытался сделать что-то подобное, но пока безуспешно (ничего не отсортировано) :

TS :

 onlyError = false;
    
selectErrors() {
  this.onlyError = !this.onlyError;
}
  

HTML :

 <div class="custom" (click)="selectErrors()" style="width:150px">
    <input type="checkbox" [checked]="onlyError">
    <label container="body">
        <div class="content">
            <div>Only error</div>
        </div>
    </label>
</div>

...

<tr *ngFor="let property of property$ | async " class="row">
  <td class="cell">
      <div class="u-font--bold u-pointer d-flex justify-content-between">
          {{property.firstTeam.item.status}}
      </div>
  </td>
  <td class="cell">
      <div class="u-font--bold u-pointer d-flex justify-content-between">
          {{property.secondTeam.item.status}}
      </div>
  </td>
</tr>
  

Я пробовал много вещей, например, сделать что-то подобное в сервисе :

 transform(error: boolean) {
    return myApiUrl.filter(l => {
        let keep = true;

        if (!error) {
            keep = l.firstTeam.status === 'success' || _.get(l, 'secondTeam.status', '') === 'success' 
        } else {
            keep = l.firstTeam.status === 'error' || _.get(l, 'secondTeam.status', '') === 'error'
        }

        return keep;
    });
}
  

безуспешно. Я пытаюсь найти самый простой подход к фильтрации моих данных по статусу, когда команда получила его, и иметь возможность отображать только команды с сообщением об ошибке.

Может кто-нибудь помочь мне с этим? Спасибо.