Question

I'm engaging with an Angular project. I using ng2-smart-table as a table for my project. as well as some one has connected it for firebase. but i can't understand how its works by look at the code. The affixed code as follows.(I added this ng2-smart-table for patients components of my project)

patients.components.ts

import { Component, OnInit } from '@angular/core';
import { PatientsService } from './patients.service';
import { Patients } from './patients.model';

@Component({
selector: 'ngx-patients',
styles: [],
template: `
    <ng2-smart-table
    (createConfirm)="addData($event)"
    [settings]="settings"
    [source]="list"
    >
    </ng2-smart-table>
`
})
export class PatientsComponent implements OnInit {
list: Patients[] = [];
constructor(private service: PatientsService) {}

ngOnInit() {
    this.service.getPatients().subscribe(actionArray => {
    let a = actionArray.payload.get('data');
    if (a) {
        this.list = a;
    }
    });
}

settings = {
    add: {
    addButtonContent: '<i class="nb-plus"></i>',
    createButtonContent: '<i class="nb-checkmark"></i>',
    cancelButtonContent: '<i class="nb-close"></i>',
    confirmCreate: true
    },
    edit: {
    editButtonContent: '<i class="nb-edit"></i>',
    saveButtonContent: '<i class="nb-checkmark"></i>',
    cancelButtonContent: '<i class="nb-close"></i>'
    },
    delete: {
    deleteButtonContent: '<i class="nb-trash"></i>',
    confirmDelete: true
    },
    columns: {
    id: {
        title: 'ID'
    },
    name: {
        title: 'Full Name'
    },
    username: {
        title: 'User Name'
    },
    email: {
        title: 'Email'
    }
    }
};

addData(event) {
    this.list.push(event.newData);
    console.log(this.list);
    this.service.addPatient({ data: this.list }).subscribe(next => {
    event.confirm.reject();
    });
}
}


**patients.service.ts**
    import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Patients } from './patients.model';
import { from } from 'rxjs';

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

    //patients
    patients : Patients;

    constructor(private firestore: AngularFirestore) { }

    /**
    * this is for the get informations about patients
    */

    getPatients(){
        return this.firestore.collection('patients').doc('patientData').snapshotChanges();
    }

    addPatient(object){
        return from(this.firestore.collection('patients').doc('patientData').set(object))
    }
}

patients.model.ts

 export class Patients {
    id: string;
    name: string;
    username: string;
    email: string;
}

what happening by follow keywords

subscribe
push
payload

can anybody help to me.

Answer 1

Angular is built upon a library called RxJs, reactive extensions for JavaScript. Reactive programming is based around observables. This is a concept you really need to learn before you start Angular development. Observables are like arrays of data where the values comes in over time. Subscribing to the observable runs the subscription function each time the observable emits a value down the stream.

This is a concept that cannot be covered in a single StackOverflow answer but some good places to start are.

https://www.learnrxjs.io/

http://reactivex.io/

https://rxmarbles.com/

What happen by subscribe() function

1 个答案: