Question

我有500个数组的数据。我需要通过选择的选项来过滤数组。表示数组中的值是状态，类型等值。当我选择status=settled时，只有那些状态值已确定的数据数组才能出现，或者如果我选择全部，则任何值的所有状态都将出现

.html

<div class="col-md-3">
  <div class="form-group">
    <label for="">Claim Status</label>
    <select class="form-control">
      <option value="all">All</option>
      <option value="submitted">Submitted</option>
      <option value="approved">Approved</option>
      <option value="cancel">Objection Claim</option>
      <option value="settled">Settled</option>
      <option value="rejected">Rejected</option>
    </select>
  </div>
</div>
<table class="table table-responsive-md text-center">
  <thead>
    <tr>
      <th>STATUS</th>
      <th>Name</th>
      <th>Patient Name</th>
      <th>Claimed Amount</th>
      <th>Company</th>
      <th>Submitted By</th>
      <!-- <th>Website URL</th> -->
      <th>Actions</th>
    </tr>
  </thead>
  <tbody *ngIf="data">
    <tr *ngFor="let x of data">
      <td>{{x.status}}</td>
      <td>
        <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="">{{x.member_name}}
      </td>
      <td>{{x.patient_name}}</td>
      <td>{{x.claimed_value}}</td>
      <td>{{x.claimed_value}}</td>
      <td>{{x.submitted_at || 'not-defined'}}</td>
      <td>
        <a class="success p-0" data-original-title="" title="">
          <i class="fa fa-pencil font-medium-3 mr-2"></i>
        </a>
        <a class="info p-0" data-original-title="" title="">
          <i class="fa fa-check font-medium-3 mr-2"></i>
        </a>
        <a class="danger p-0" data-original-title="" title="">
          <i class="fa fa-trash-o font-medium-3 mr-2"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>
</div>

.ts


import { Component, OnInit } from '@angular/core';
import { ApiService } from 'app/services/api/api.service';
import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{

 clientData: Observable<any>;
 data: any  = []; 
 constructor(private api:ApiService, public httpClient: HttpClient) { 

 this.getClaims();

}

   getClaims(){
   this.clientData = this.httpClient.get
('http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/ 
insurance-api/get_claims.php?').
subscribe(data => {
console.log(data);
this.data = data.records;

    });
   }
}

我已经做到了，但是当我选择所有显示时，当我选择所有数据显示时，不需要任何东西。

<div class="col-md-3">
  <div class="form-group">
    <label for="">Claim Status</label>
      <select class="form-control" [(ngModel)]="userFilter.status">
        <option >All</option>

        <option value="submitted">Submitted</option>
        <option value="approved">Approved</option>
        <option value="cancel">Objection Claim</option>
        <option value="settled">Settled</option>
        <option value="rejected">Rejected</option>
      </select>
    </div>
  </div>
</div>

<table class="table table-responsive-md text-center">
  <thead>
    <tr>
      <th>STATUS</th>
      <th>Name</th>
      <th>Patient Name</th>
      <th>Claimed Amount</th>
      <th>Company</th>
      <th>Submitted By</th>
      <!-- <th>Website URL</th> -->

      <th>Actions</th>
    </tr>
  </thead>

  <tbody *ngIf="data">
    <tr *ngFor="let x of data | filterBy: userFilter">
      <td>
          <span class="text-success" *ngIf="x.status == 'submitted'">Submitted</span>
          <span class="text-primary" *ngIf="x.status == 'settled'">Settled</span>
          <span class="text-warning" *ngIf="x.status == 'rejected'">Rejected</span>
          <span class="text-danger" *ngIf="x.status == 'Approved'">Approved</span>
          <span class="text-danger" *ngIf="x.status == 'ojection claim'">Objection claim</span>
      </td>

      <td>
        <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="">
        {{x.member_name}}
      </td>

      <td>{{x.patient_name}}</td>
      <td>{{x.claimed_value}}</td>

      <td>                                      
        {{x.claimed_value}}
      </td>

      <td>{{x.submitted_at || 'not-defined'}}</td>

      <td>
        <a class="success p-0" data-original-title="" title="">
          <i class="fa fa-pencil font-medium-3 mr-2"></i>
        </a>
        <a class="info p-0" data-original-title="" title="">
          <i class="fa fa-check font-medium-3 mr-2"></i>
        </a>
        <a class="danger p-0" data-original-title="" title="">
          <i class="fa fa-trash-o font-medium-3 mr-2"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

创建基于键值的地图

statusData : Map<String, String[]> = new Map<String, String[]>();

    getClaims(){
       this.clientData = 
    this.httpClient.get
    ('http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/ 
    insurance-api/get_claims.php?').
    subscribe(data => {
    console.log(data);
    this.data = data.records;
    for(var i=0; i<this.data.length; i++){
    setStatusMap(this.data[i].status, this.data[i]);
    }
        });

        }
    setStatusMap(id, data) {
            this.statusData = this.statusData.set(id, summary);
        }

    getStatusMap(){
    return this.statusData;
    }

访问地图只需调用以下方法：

this.getStatusMap().get(statusValue);

角度显示数组中选择的选项数据

1 个答案: