आरएक्सजेएस विषय

Question

के माध्यम से सर्वर साइड फ़िल्टरिंग और पेजिनेशन का उपयोग करते समय एकाधिक आइटम चयन (चेकबॉक्स) को अनुमति देने के लिए कैसे करें मुझे कोणीय 4.3 एचटीपी क्लाइंट का उपयोग करके अपने आरईएसटी एपीआई से डेटा का अनुरोध करने की आवश्यकता है। मेरा घटक सर्वर पक्ष फ़िल्टरिंग (जैसे उपयोगकर्ता शब्द टाइप करता है) और पेजिनेशन प्रदान करने के लिए Subject कक्षा का उपयोग करता है, लेकिन मुझे परिणाम डेटा ग्रिड में चेकबॉक्स का उपयोग करके आइटम के एकाधिक चयन की अनुमति भी देनी होगी।

<tr *ngFor="let vehicle of vehicles$ | async"> 
    <td><input type="checkbox" name="vehicle-selection" id="vehicle-{{vehicle.id}}" value="{{vehicle.id}}" [ngModel]="vehicle.checked" (ngModelChange)="setChecked(vehicle.id, $event)" /></td> 
    <td>{{vehicle.chassis}}</td> 
    <td>{{vehicle.lastUpdate || '' | amFromUtc | amDateFormat: 'DD/MM/YYYY'}}</td> 
    <td>{{vehicle.description}}</td> 
    <td>{{vehicle.location}}</td> 
</tr> 

vehicles$ एक observable<Vehicle[]> है और डेटा सही ढंग से प्रदर्शित किया जाता है, तथापि, जब मैं कुछ चेक बॉक्स के लिए जाँच की स्थिति बदलने, में vehicle.checked संपत्ति:

मैं एक डेटा ग्रिड बनाने के लिए निम्नलिखित कोड है डेटा बाध्य देखने योग्य नहीं बदला गया है।

मुझे क्या याद आ रही है?

import { Component, OnInit, AfterViewInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import { Router } from '@angular/router'; 

import { NotificationsService } from 'angular2-notifications'; 
import { ConfirmationService } from '@jaspero/ng2-confirmations'; 

import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/merge'; 
import 'rxjs/add/operator/pluck'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/operator/switchMap'; 


import { ResolveEmit, ConfirmSettings } from '../../shared/interfaces/jaspero'; 
import { VehiclesService } from '../../core/services/vehicles.service'; 
import { Vehicle } from '../../shared/interfaces/vehicle'; 
import { PagedResults } from 'app/shared/interfaces/paged-results'; 
import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged'; 

@Component({ 
    selector: 'app-vehicles-search', 
    templateUrl: './vehicles-search.component.html', 
    styleUrls: ['./vehicles-search.component.scss'], 
    providers: [VehiclesService] 
}) 
export class VehiclesSearchComponent implements OnInit { 
    vehicles$: Observable<Vehicle[]>; 
    totalRecords$: Observable<number>; 
    page = 1; 
    searchTerm = ''; 

    searchTermStream = new Subject<string>(); 
    pageStream = new Subject<number>(); 

    constructor(
    private vehiclesService: VehiclesService, 
    private router: Router, 
    private notification: NotificationsService, 
    private confirmation: ConfirmationService 
) { } 

    search(term: string) { 
    this.searchTermStream.next(term); 
    } 

    assignAnomaly() { 
    this.vehicles$ 
     .map(m => { 
     console.log(m); return m.filter(f => f.checked); 
     }) 
     .subscribe(res => { 
     if (res.length < 1) { 
      this.notification.warn('Associar Anomalia', 'Você deve selecionar um veículo antes.'); 
     } 
     }); 
    } 

    setPage(page: number) { 
    this.pageStream.next(page); 
    } 

    ngOnInit(): void { 
    const searchSource = this.searchTermStream 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .map(term => { 
     this.searchTerm = term; 
     return { search: term, page: 1 }; 
     }); 

    const pageSource = this.pageStream 
     .map(pageNumber => { 
     this.page = pageNumber; 
     return { search: this.searchTerm, page: pageNumber }; 
     }); 

    const source = pageSource 
     .merge(searchSource) 
     .startWith({ search: this.searchTerm, page: this.page }) 
     .switchMap((params: { search: string, page: number }) => { 
     return this.vehiclesService.getVehicles(params.search, params.page); 
     }); 

     this.totalRecords$ = source.pluck('totalRecords'); 
     this.vehicles$ = source.pluck('results'); 
    } 

    setChecked(val, ev) { 
    console.log(val); 
    console.log(ev); 
    } 
} 

Http सेवा

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { HttpClient } from '@angular/common/http'; 
import { environment } from '../../../environments/environment'; 

import { PagedResults } from '../../shared/interfaces/paged-results'; 
import { Vehicle } from '../../shared/interfaces/vehicle'; 

import 'rxjs/add/operator/toPromise'; 
import { forEach } from '@angular/router/src/utils/collection'; 

@Injectable() 
export class VehiclesService { 

    private baseUrl = `${environment.apiUrl}/api/vehicles`; // URL to web api 

    constructor(private http: HttpClient) { } 

    getVehicles(filter: string, page: number): Observable<PagedResults<Vehicle[]>> { 
    filter = filter ? `/${filter}` : ''; 
    return this.http 
     .get<Vehicle[]>(`${this.baseUrl}/page/${page}${filter}`, {observe: 'response'}) 
     .map((res) => { 
     const totalRecords = +res.headers.get('X-InlineCount'); 
     const results = res.body; 

     for (let i = 0; i < results.length; i++) { 
      results[i].checked = false; 
     } 

     return { 
      results: res.body, 
      totalRecords: totalRecords 
     }; 
     }) 
     .catch(this.handleError); 
    } 

    getVehicleById(id: number): Observable<Vehicle> { 
    return this.http.get(`${this.baseUrl}/${id}`) 
     .map((res: Response) => res.json()) 
     .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
    console.error('An error occurred', error); 
    return Promise.reject(error.message || error); 
    } 
} 

Answer 1

मुझे लगता है कि आप चेक बॉक्स बंधन में [(ngModel)]="vehicle.checked" उपयोग करना चाहिए:

यहाँ पूर्ण घटक स्रोत है।

[ngModel]="vehicle.checked" केवल एक तरफा बाध्यकारी है, वाहन की चेक की गई संपत्ति बदल जाने पर यह केवल यूई को बदल देगा।

यदि आप चेकबॉक्स को चेक की गई संपत्ति को प्रभावित करना चाहते हैं, तो आपको दो-तरफा बाइंडिंग का उपयोग करना चाहिए, जो [(ngModel)]="vehicle.checked" है।

Answer 2

आप आप शुरू यह खाली है, तो getVehicles की सदस्यता Observable के बजाय Vehicle के Array इस्तेमाल करने की कोशिश कर सकते हैं, और उन्हें सरणी में जोड़ने के लिए या उन्हें बदलना।