我的代码需要帮助。我在api中从api（太大）中获取数据，这是仅显示500个数组的限制。但它们是company_id的参数。我正在获取仅显示500个数组的数据。但是我需要当我选择company_id时，它将在api中传递company_id并在.html中显示该结果
这是home.html
<div class="row">
<div class="col-12">
<div class="content-header">Claims Status</div>
<p class="content-sub-header">Claims Settled 23</p>
</div>
</div>
<section id="extended">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-success">
<h4 class="card-title">Claims</h4>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="row">
<div class="col-md-3">
<div class="form-group" >
<label for="">Search Name</label>
<input type="text" class="form-control" [(ngModel)]="userFilter.member_name" placeholder="Search name" name="search">
</div>
</div>
<div class="col-md-3">
<div class="form-group" >
<label for="">Search Claim No</label>
<input type="search"
class="form-control" placeholder="Claim No" [(ngModel)]="userFilter.claim_no">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Company</label>
<select class="form-control" [(ngModel)]="userFilter.company_id" >
<option value='' >All</option>
<option value="999">Airlink Communication</option>
<option value="637">Ascertia (Pvt) Ltd</option>
<option value="1053">Frontier Works Organization</option>
<option value="1174">Ebryx (pvt) Ltd</option>
<option value="274">HY Enterprises (Pvt) Limited</option>
<option value="459">Naimat Saleem trust NST (US GROUP)</option>
<option value="659">Samad Rubber Works (Pvt) Ltd</option>
<option value="56">Sundry Clients</option>
<option value="620">TIMEXPERTS (PRIVATE) Limited</option>
<option value="39">US Apparel & Textile (Pvt) Limited</option>
<option value="40">US Denim Mills (Pvt) Limited</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Claim Status</label>
<select class="form-control" [(ngModel)]="userFilter.status">
<option value='' >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>Claim No</th>
<!-- <th>Website URL</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>
<span class="text-success" *ngIf="x.company_id == '999'" >Airlink Communication</span>
<span class="text-success" *ngIf="x.company_id == '637'">Ascertia (Pvt) Ltd</span>
<span *ngIf="x.company_id == '1053'" class="text-success">Frontier Works Organization</span>
<span *ngIf="x.company_id == '1174'" class="text-success">Ebryx (pvt) Ltd</span>
<span *ngIf="x.company_id == '274'" class="text-success">HY Enterprises (Pvt) Limited</span>
<span *ngIf="x.company_id == '459'" class="text-success">Naimat Saleem trust NST (US GROUP)</span>
<span *ngIf="x.company_id == '659'" class="text-success">Samad Rubber Works (Pvt) Ltd</span>
<span *ngIf="x.company_id == '56'" class="text-success">Sundry Clients</span>
<span *ngIf="x.company_id == '620'" class="text-success">TIMEXPERTS (PRIVATE) Limited</span>
<span *ngIf="x.company_id == '39'" class="text-success">US Apparel & Textile (Pvt) Limited</span>
<span *ngIf="x.company_id == '40'" class="text-success">US Denim Mills (Pvt) Limited</span>
</td>
<td>{{x.claim_no}}</td>
<td>{{x.submitted_at || 'not-defined'}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
这是home.component.ts，我从api中获取数据
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';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent {
clientData: Observable<any>;
data: any = [];
constructor(private api:ApiService, public httpClient: HttpClient) {
this.getClaims();
}
userFilter: any = { claim_no:'', member_name:'', status:'', company_id:
''};
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;
});
}
}
更多定义我的问题：它成功显示了api中的数据。 （并非所有数据都只有500个数组，因为它在api中设置的只能显示500个数据，但是如果我传递了company_id的参数，那么它将显示api中所有数据中的company_id而不是500中的数据）。 我需要从中获取公司ID值并将其作为参数传递给api，然后显示该company_id的结果。
答案 0 :(得分：1)
在您的html中尝试像这样在(change)中使用<select>方法
<div class="col-md-3">
<div class="form-group">
<label for="">Company</label>
<select class="form-control" [(ngModel)]="userFilter.company_id" (change)="getClaims()">
<option value='' >All</option>
<option value="999">Airlink Communication</option>
<option value="637">Ascertia (Pvt) Ltd</option>
<option value="1053">Frontier Works Organization</option>
<option value="1174">Ebryx (pvt) Ltd</option>
<option value="274">HY Enterprises (Pvt) Limited</option>
<option value="459">Naimat Saleem trust NST (US GROUP)</option>
<option value="659">Samad Rubber Works (Pvt) Ltd</option>
<option value="56">Sundry Clients</option>
<option value="620">TIMEXPERTS (PRIVATE) Limited</option>
<option value="39">US Apparel & Textile (Pvt) Limited</option>
<option value="40">US Denim Mills (Pvt) Limited</option>
</select>
</div>
</div>
然后在您的.ts文件中，如果代码中没有其他代码，我将使用它，但是您可以在三进制条件下进行转换。
getClaims(){
if(this.userFilter.company_id){
let url = 'http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims.php?company_id='+this.userFilter.company_id;
}else{
let url = 'http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims.php?';
}
this.clientData = this.httpClient.get(url).
subscribe(data => {
console.log(data);
this.data = data.records;
});
}