Hello,

Je viens de créer un composant qui récupère un objet 'Customer' d'un formulaire pour l'insérer dans un datagrid (librairie devExtreme) : une ligne est ajoutée à chaque soumission du formulaire et le datagrid actualise la liste des 'customers'.
Le customer ajouté par dans un fake backend de type json-server.

En fait le code fonctionne lorsque j'ajoute un customer, je le récupère dans mon pseud backend et une nouvelle ligne avec les données s'ajoute dans le datagrid,
mais je duplique l'instance de DataSource à chaque souscription pour pouvoir charger le tableau de données (cutomers) dans le dataSource .
L'idée serait d'implémenter le dataSource beaucoup plus proprement. Je me demandais si un subject ne serait pas utile dans ce cas, mais je maitrise très mal ...le sujet. Merci pour vos suggestions. Je suis preneur d'autres conseils sur les autres défauts sur ce code.

Voici le model
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
export class Customer {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
    city: string;
    postCode: number;
}
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
------------------------------------------------------------
ngOnInit(): void {
    this.initCustomerForm();
    this.getCustomerslist();
  }
 
  initCustomerForm() {
    this.customerForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      city: ['', Validators.required],
      postCode: ['', Validators.pattern("^[0-9]*$")]
    })
  }
 
  onSubmitForm() {
    let customer = new Customer();
 
    customer.firstName = this.customerForm.value['firstName'];
    customer.lastName = this.customerForm.value['lastName'];
    customer.email = this.customerForm.value['email'];
    customer.city = this.customerForm.value['city'];
    customer.postCode = this.customerForm.value['postCode'];
 
    this.dataGridService.addCustomerService(customer).subscribe(() => {
      this.dataSource = new DataSource(
        { store: this.customers }
      );
 
      this.dataSource.store().insert(customer).then(() => this.dataSource.reload());
    });
    this.initCustomerForm();
  }
 
  getCustomerslist() {
    this.dataGridService.getCustomerListService().subscribe(
      list => {
        this.customers = list;
        this.dataSource = new DataSource({
          store: this.customers 
        });
      }
    );
  }
 
  convertIntoPDF() {
    const doc = new jsPDF();
    exportDataGridToPdf({
      jsPDFDocument: doc,
      component: this.dataGrid.instance
    }).then(() => {
      doc.save('customers_list.pdf')
    })
  }
 
------------------------------------------------------