मैं कोणीय 6 का उपयोग कर रहा हूं, और कुछ रिकॉर्ड दिखाने के लिए मैं कोणीय सामग्री डेटा तालिका का उपयोग कर रहा हूं।

जब मैं किसी ग्राहक को सहेजता या हटाता हूं, तो परिवर्तन डीबी में बने रहते हैं लेकिन यूआई में प्रतिबिंबित नहीं होते हैं, मुझे परिवर्तनों को दर्शाने के लिए पेज रीफ्रेश करने की आवश्यकता होती है।

मैंने नीचे कोड दिया है, पहले यह एक पॉपअप के रूप में ग्राहक सूची फिर ग्राहक घटक लोड करेगा

मैं सीआरयूडी संचालन के लिए रेस्ट कॉल कर रहा हूं।

customerList.component.ts
**************************

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { MatTableDataSource,MatDialog,MatDialogConfig } from '@angular/material';
import { CustomerComponent } from '../customer/customer.component';

@Component({
  selector: 'customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {

  dataSource;
  searchKey:string;

  displayedColumns = ['name','actions'];

  constructor(private service : UserService,
              private dialog : MatDialog) { }

  ngOnInit() {
    this.fetchCustomer();
  }

  onSearchClear(){
    this.searchKey="";
    this.applyFilter();
  }

  applyFilter(){
    this.dataSource.filter = this.searchKey.trim().toLowerCase();
  }

  newCustomer(){
    this.service.initializeForm();
    const dialogConfig = new MatDialogConfig();
    //dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    this.dialog.open(CustomerComponent, dialogConfig).afterClosed().subscribe(() => this.fetchCustomer());
  }


  viewCustomer(customer){
    console.log(event.target);
    this.service.populateForm(customer);
    const dialogConfig = new MatDialogConfig();
    //dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    this.dialog.open(CustomerComponent,dialogConfig);
  }

  editCustomer(customer){
    this.service.populateForm(customer);
    console.log(customer);
    const dialogConfig = new MatDialogConfig();
    //dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    this.dialog.open(CustomerComponent,dialogConfig);
  }


    deleteCustomer(id){
    this.service.deleteCustomerData(id).subscribe(
      data => console.log("success", data),
      error => console.error("Error!",error)
    );
    this.populateTable();
  }

  fetchCustomer(){
    this.service.getUser().subscribe( results => {
      if(!results){

        return;
      }
      console.log(results);
      this.dataSource = new MatTableDataSource(results);
  })
  }
}

customerList.component.html
*******************************

<h1>Customer-List</h1>
<div class="search-div">
    <button mat-raised-button (click)="newCustomer()" style="position: absolute; right: 0;">
      <mat-icon>add</mat-icon>New Customer
    </button>
  </div>

  <div>
    <mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let user"><a href>{{user.name}}</a></mat-cell>
      </ng-container>
      <ng-container matColumnDef="actions">
        <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
        <mat-cell *matCellDef="let row">
          <button mat-icon-button matTooltip="Click to View" (click)="viewCustomer(row)" class="iconbutton" color="primary">
                <mat-icon>visibility</mat-icon>
              </button>
          <button mat-icon-button matTooltip="Click to Edit" (click)="editCustomer(row)" class="iconbutton" color="primary">
              <mat-icon>edit</mat-icon>
            </button>
          <button mat-icon-button matTooltip="Click to Delete" (click)="deleteCustomer(row)" class="iconbutton" color="warn">
              <mat-icon>delete</mat-icon>
            </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
    </mat-table>
  </div>


customer.component.ts
**********************
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,FormBuilder,Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material';
import { UserService } from '../services/user.service';

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

  constructor(private customerService : UserService,
              public dialogRef : MatDialogRef<CustomerComponent>) { }

  ngOnInit() {
    this.customerService.getUser();
  }

  onSubmit(){
    this.customerService.customerData(this.customerService.cutsomerForm.value).subscribe(
      data => console.log("success", data),
      error => console.error("Error!",error)
    );
   this.onClose();
  }

  onClose(){
    this.clearForm();
    this.dialogRef.close();
  }

  clearForm(){
    this.customerService.cutsomerForm.reset();
    //this.customerService.initializeForm();
  }
}

customer.component.html
*************************

<div class="container-fluid">
    <h2>New Customer</h2>
    <form [formGroup]="customerService.cutsomerForm" (ngSubmit)="onSubmit()" #newCustomer="ngForm">
      <div class="form-group">
        <label>Customer Name</label>
        <input [class.is-invalid]="customerService.cutsomerForm.get('name').invalid &&
                                   customerService.cutsomerForm.get('name').touched" formControlName = "name" type="text" class="form-control">
      </div>
      <input type="hidden" formControlName="id"> 

      <div class="form-group">
        <label>userName</label>
        <input formControlName = "username" type="text" class="form-control">
      </div>

      <div class="form-group">
        <label>email</label>
        <input formControlName = "email" type="text" class="form-control">
      </div>

      <div class="form-group">
        <label>phone</label>
        <input formControlName = "phone" type="text" class="form-control">
      </div>

      <div>
        <button class="btn btn-primary" [disabled] = !newCustomer.valid type="submit">Submit</button>
      </div>

    </form>
    <button class="btn btn-danger" (click)="clearForm()">Clear</button>
  </div>

User.service.ts


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Customer } from '../models/Customer.model';
import { FormGroup, FormControl,FormBuilder,Validators } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class UserService {

 private serviceUrl = "https://jsonplaceholder.typicode.com/users";

  // private findAllCustomers = "http://localhost:8080/findAllCustomers";

  // private insertNewCustomer = "http://localhost:8080/addCustomer";

  constructor(private http : HttpClient,
    private fb : FormBuilder) { }

  cutsomerForm = this.fb.group({
    id : [''],
    name : ['',Validators.required],
    username : [''],
    email : [''],
    phone : ['']
  })

  initializeForm(){
    this.cutsomerForm.setValue({
      id : '',
      name : '',
      username : '',
      email : '',
      phone : ''
    });
  }

  getUser() : Observable<Customer[]> {
      return this.http.get<Customer[]>(this.serviceUrl);
  }

  customerData(customer: Customer): Observable<Customer> {
    return this.http.post<Customer>(this.serviceUrl,customer);
  }

  populateForm(customer){
    this.cutsomerForm.setValue(customer);
  }
}
0
mohan 14 जून 2019, 11:24

2 जवाब

सबसे बढ़िया उत्तर

आप किसी ग्राहक को तालिका से सहेज रहे हैं या हटा रहे हैं, लेकिन dataSource उस डेटा का उपयोग कर रहा है जिसे आपने पहले ही डेटाबेस से प्राप्त कर लिया है। जब तक आप इसे मैन्युअल रूप से नहीं करते हैं, तब तक इसे अद्यतन डेटा नहीं मिल सकता है।

एक नए ग्राहक को सहेजते समय, आपको getUser() फिर से अनुरोध करना होगा (या ग्राहक ऑब्जेक्ट को results वैरिएबल में पुश करना होगा) और dataSource को फिर से इनिशियलाइज़ करना होगा।

हटाते समय, फिर से, या तो फिर से कॉल करें, या परिणाम चर के माध्यम से पुनरावृति करें, हटाए गए ग्राहक को ढूंढें, इसे सरणी से निकालें, और dataSource को पुन: प्रारंभ करें।

2
Akash Srivastav 14 जून 2019, 12:02

आकाश का दृष्टिकोण सही है। उनके दृष्टिकोण के अलावा आपको MatDialog को जोड़ने के लिए afterClosed() विधि का उपयोग करना चाहिए वर्तमान घटक और संवाद बंद होने पर अधिसूचित हो जाएं। संवाद बंद होने के बाद, बस उपयोगकर्ताओं को फिर से लाएं।

  ngOnInit() {
    this.fetchUsers();
  }

  newCustomer(type) {
    this.service.initializeForm();
    const dialogConfig = new MatDialogConfig();
    //dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    dialogConfig.id = type;
    this.dialog.open(CustomerComponent, dialogConfig).afterClosed().subscribe(() => this.fetchUsers());
  }

  fetchUsers() {
    this.service.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      console.log(results);
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    })
  }

इसके अलावा यदि आप हटाने के लिए कोड साझा करते हैं और CustomerComponent किसी भी संभावित समस्या का विश्लेषण करना आसान होगा।

1
ysf 16 जून 2019, 23:53