Я участвую в проекте Angular. Я использую Visual Studio code в качестве текстового редактора. В качестве компонента я использовал таблицу ng2-smart-table as своего проекта manufacture . Но я не могу понять, как добавлять данные, а также извлекать данные из firebase. кто-нибудь может мне помочь. Как упоминалось выше. я использую шаблон таблицы внутри manufacture компонента.

Это моя таблица.

manufacture.component.ts

 import { Component, OnInit } from '@angular/core';

@Component({
selector: 'ngx-manufacture',
styles:[],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {

constructor() { }

ngOnInit() {
}

settings = {
    add: {
        addButtonContent: '<i class="nb-plus"></i>',
        createButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
    },
    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'
        }
    }
};

    data = [
        {
            id: 1,
            name: "Leanne Graham",
            username: "Bret",
            email: "Sincere@april.biz"
        },
        {
            id: 2,
            name: "Ervin Howell",
            username: "Antonette",
            email: "Shanna@melissa.tv"
        },

        {
            id: 11,
            name: "Nicholas DuBuque",
            username: "Nicholas.Stanton",
            email: "Rey.Padberg@rosamond.biz"
        }
    ];
}
 

Тогда что мне делать с этой проблемой.

Вот: DataSource

ng2-smart-table использует DataSource class для полной работоспособности в CRUD action. Это довольно просто, если вы имеете дело с локальным источником данных (поскольку он хранился в автономном режиме): они предоставляют LocalDataSource класс, в котором они являются производными от их DataSource . Ваш код будет выглядеть следующим образом.

 import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

@Component({
selector: 'ngx-manufacture',
styles:[],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {

constructor() { }

ngOnInit() {
}

settings = {
    add: {
        addButtonContent: '<i class="nb-plus"></i>',
        createButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
    },
    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'
        }
    }
};

    data: LocalDataSource = new LocalDataSource();

    constructor() {
        this.data.load([
            {
                id: 1,
                name: "Leanne Graham",
                username: "Bret",
                email: "Sincere@april.biz"
            },
            {
                id: 2,
                name: "Ervin Howell",
                username: "Antonette",
                email: "Shanna@melissa.tv"
            },
            {
                id: 11,
                name: "Nicholas DuBuque",
                username: "Nicholas.Stanton",
                email: "Rey.Padberg@rosamond.biz"
            }
        ]);
    }
}
 

Я предлагаю вам начать с этого, чтобы узнать, как вы используете LocalDataSource .

Так что насчет онлайн-источника данных?

А вот и настоящая сделка.

В прошлый раз мне было поручено создать отображение администратора с помощью Angular, серверного сервера API и ng2-smart-table . Я справился с LocalDataSource этим, но затем возникла проблема: это не был локальный источник данных. После какой-то яростной ночи я нашел это, в котором показано, что у них было две версии того, как они обрабатывают данные: local и server .

Это может вам немного повредить, но я обнаружил, что вам нужно создать свой собственный источник данных. Простой подход заключается в выводе из LocalDataSource . Ваш новый DataSource может выглядеть следующим образом.

 import { LocalDataSource } from 'ng2-smart-table';

export class CustomDataSource extends LocalDataSource {
    constructor() { super(); }

    doSomeDataFetchFromFirestoreAsync(): Promise<any[]> {
        // Insert your data fetch flow here ...
    }

    doSomeAddFunctionToFirestoreAsync(element: any): Promise<any> {
        // Insert your data addition flow here ...
    }

    doSomeDeleteFunctionToFirestoreAsync(): Promise<any> {
        // Insert your data removal flow here ...
    }

    doSomeUpdateFunctionToFirestoreAsync(): Promise<any> {
        // Insert your data update flow here ...
    }

    load(): Promise<any> {
        // Do Some fetch from firestore as aync method, then (on completion) redirect back to LocalDataSource::load() method to maintain the chain
        return doSomeDataFetchFromFirestoreAsync().then((preparedDataSet: any[]) => super.load(preparedDataSet));
    }

    add(element: any): Promise<any> {
        // Do Some add function to firestore as aync method, then (on completion) redirect back to LocalDataSource::add() method to maintain the chain
        return doSomeAddFunctionToFirestoreAsync(element).then((addedElement) => super.add(addedElement));
    }

    remove(element: any): Promise<any> {
       // Same as load or add actually
       return doSomeDeleteFunctionToFirestoreAsync(element).then(() => super.remove(element));
    }

    update(element: any, values: any): Promise<any> {
        // This one is a little bit tricky: The DataSource will try find unchanged `element` first, then updates the value inside unchanged one with `values`
        return doSomeUpdateFunctionToFirestoreAsync(element, values).then((editedElement) => super.update(element, editedElement));
    }
}
 

 // ...
    data: CustomDataSource = new CustomDataSource();

    constructor() {
        this.data.load();
    }
// ...
}