Строка вложенных таблиц в Material Design в Angular 6 - PullRequest
Новая
       18

Строка вложенных таблиц в Material Design в Angular 6

0 голосов
/ 30 мая 2018

Я пытаюсь составить отчет о финансовых расходах за последние 3 года во вложенной таблице с использованием matrial-design.Я хочу, чтобы выходные данные выглядели как enter image description here У меня есть вложенный json, в котором каждый родитель может иметь n число детей.Например, 

detailOfExpenditureSection= [
{
    sections: 'Revenue',
    headDetail: [{
        majorHeadNumber: '2403',
        majorHeadDescription: 'Animal Husbandry',
        subMajorHeadDetail: [{
            subMajorHeadNumber: '00',
            subMajorHeadDescription: '',
            minorHeadDetail: [{
                minorHeadNumber: '001',
                minorHeadDescription: 'Direction and Administration',
                subMinorHeadDetail: [{
                    subMinorHeadNumber: '60',
                    subMinorHeadDescription: 'Administration',
                    detailedHeadDetail: [{
                        detailedHeadNumber: '44',
                        detailedHeadDescription: 'Head Office Establishment',
                        objectHeadDetails: [{ objectHeadNumber: '01', objectHeadDescription: 'Salaries', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        { objectHeadNumber: '11', objectHeadDescription: 'Travel Expenses', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        { objectHeadNumber: '13', objectHeadDescription: 'Office Expenses', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        { objectHeadNumber: '26', objectHeadDescription: 'Advertisement and Publisity', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        ]
                    }]
                }]
            }]
        }]
    }]
}]

, где sections и соответствующие головы могут повторяться.Учитывая это, я пытаюсь создать таблицу с использованием таблицы материалов, но не могу создать желаемый результат. Моя проблема в том, что я не смог отобразить фактические и другие правильные столбцы в заголовок объекта в столбце заголовков.Из-за этого строка не соответствует.Я попытался отобразить столбец и строку, создав директиву, взяв ссылку из здесь , но не смог этого сделать.Как можно получить желаемый результат.

1 Ответ

0 голосов
/ 20 июня 2018

Источник данных таблицы, который может быть предоставлен тремя способами (в порядке сложности):

  1. Простой массив данных (каждый объект представляет одну строку таблицы)
  2. Потоккоторый выдает массив данных каждый раз, когда массив меняет
  3. Объект DataSource, который реализует интерфейс подключения / отключения.

Если предоставляется массив данных, таблица должна быть уведомлена, когда массивобъекты добавляются, удаляются или перемещаются.Это можно сделать, вызвав функцию renderRows (), которая будет отображать diff с момента последнего отображения таблицы.Если ссылка на массив данных изменяется, таблица автоматически инициирует обновление строк.

При предоставлении наблюдаемого потока таблица автоматически запускает обновление, когда поток генерирует новый массив данных.

Наконец, при предоставлении объекта DataSource таблица будет использовать поток Observable, предоставляемый функцией connect, и запускать обновления, когда этот поток генерирует новые значения массива данных.Во время ngOnDestroy таблицы или когда источник данных удаляется из таблицы, таблица будет вызывать функцию отключения DataSource (может быть полезно для очистки любых подписок, зарегистрированных во время процесса подключения).Найдена полная ссылка здесь

Измените json на плоскую структуру и манипулируйте данными в файле .ts, который мне подходит, используя ngIf="SomeFunction()" в файле .html.

...