Как отфильтровать данные JSON в итерации ngfor и получить указанное значение в ‹td› в angular 9

У меня есть статические определенные данные в JSON, которые я импортировал в свой типскрипт. С другой стороны, у меня есть итерированные данные ngFor в таблице. Мой запрос состоит в том, чтобы сравнить значение, полученное от ngFor через API (данные mysql). каждое значение должно сравниваться со значением данных JSON или путем фильтрации данных JSON по отношению к каждому повторяемому значению. Пожалуйста, посмотрите на мой текущий код и помогите заставить его работать.

html

<table id="basic-datatables" class="display table table-striped table-hover" >
                <thead>
                  <tr align="center">
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email ID</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Location</th>
                    <th>Access Control</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of userlist" align="center">
                    <td id="userId">{{item.user_id}}</td>
                    <td>{{item.First_Name}} {{item.Last_Name}}</td>
                    <td >{{item.username}}</td>
                    <td >{{item.Designation}}</td>
                    <td>{{item.Department}}</td>
                    <td>{{item.Location}}</td>
                    <td>{{item.Access_Role}}</td>
                  </tr>
                </tbody>

Моя функция ts

    getUserlist(){
  // tslint:disable-next-line: deprecation
  console.log('Loggin Function');

  this.querySubscription = this._backendService.getUserlist().subscribe((res: { errorCode: number; errorMessage: string; }) => {
    if (res.errorCode > 0) {
        this.error = false;
        this.errorMessage = '';
        this.dataLoading = false;
        this.savedChanges = true;
        // tslint:disable-next-line: no-string-literal
        this.userlist = res['data'];
        this.userAccess.filter(e => (e.value) = this.userlist.Access_Role);
        this.userDepartment.filter(e => (e.value) = this.userlist.Department);
        this.userDesignation.filter(e => (e.value) = this.userlist.Designation);
        this.userLocation.filter(e => (e.value) = this.userlist.Location);
        console.log(this.userlist.Access_Role);
    } else {
        this.error = true;
        this.errorMessage = res.errorMessage;
        this.dataLoading = false;
    }
  });
}

Данные JSON

    {
  "user_access": [
     {
        "value": "1",
        "text": "Administrator"
     },
     {
        "value": "2",
        "text": "Dept Head"
     },
     {
        "value": "3",
        "text": "Staff"
     },
     {
        "value": "4",
        "text": "Customer"
     }
  ],
  "user_department": [
     {
        "value": "1",
        "text": "Sales"
     },
     {
        "value": "2",
        "text": "Production"
     },
     {
        "value": "3",
        "text": "Planning"
     },
     {
        "value": "4",
        "text": "Design"
     },
     {
        "value": "5",
        "text": "Operation"
     },
     {
        "value": "6",
        "text": "Purchase"
     },
     {
        "value": "7",
        "text": "Service"
     },
     {
        "value": "8",
        "text": "Quality"
     },
     {
        "value": "9",
        "text": "Finance"
     },
     {
        "value": "10",
        "text": "IT"
     }
  ],
  "user_designation": [
     {
        "value": "1",
        "text": "Director"
     },
     {
        "value": "2",
        "text": "Sr.Manager"
     },
     {
        "value": "3",
        "text": "Manager"
     },
     {
        "value": "4",
        "text": "Asst.Manager"
     },
     {
        "value": "5",
        "text": "Sr.Engineer"
     },
     {
        "value": "6",
        "text": "Engineer"
     },
     {
        "value": "7",
        "text": "Sr.Excecutive"
     },
     {
        "value": "8",
        "text": "Excecutive"
     },
     {
        "value": "9",
        "text": "Supervisor"
     }
  ],
  "user_location": [
     {
        "value": "1",
        "text": "Thiruvallur - Factory"
     },
     {
        "value": "2",
        "text": "Chennai - Sales"
     },
     {
        "value": "3",
        "text": "Banglore - Sales"
     },
     {
        "value": "4",
        "text": "Hyderabad - Sales"
     }
  ]
}

Текущая таблица в HTML-представлении

введите здесь описание изображения

Требуется фактическая таблица в формате HTML

введите здесь описание изображения


typescript json angular html angular9
person hablu    schedule 04.04.2020    source источник
comment
Вы можете либо использовать функцию карты в своем машинописном тексте и добавить дополнительные свойства, либо вы можете создать несколько каналов, чтобы изменить эти значения на описание. Тем не менее, я буду предлагать карту и новые свойства.   -  person Gourav Garg    schedule 04.04.2020
comment
Большое спасибо. Поскольку я новичок в машинописном тексте, можете ли вы предложить пример   -  person hablu    schedule 04.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

По сути, вы пишете канал, который затем можете использовать в директиве *ngFor.

В вашем компоненте:

filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];

В вашем шаблоне вы можете передать строку, число или объект в свой канал, чтобы использовать его для фильтрации:

<li *ngFor="let item of items | myfilter:filterargs">

В вашей трубе:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

Ссылка на основной вопрос о том, как применить фильтры к *ngFor?

person Masoud Bimar    schedule 04.04.2020