https://material.angular.io/components/table/overview

ы вы сделали расширяемые строки в таблицах угловых материалов? Одним из требований является то, что мне нужно использоватьугловой материал стола, Я также предпочел бы использовать материал аккордеон к предоставленной информацииВот.

Я хочу нажать на строку и показать различную информацию для каждого столбца. Я ищу что-то вроде ниже. Если щелкнуть строку 1, строки 2 и 3 появятся с разными данными.

 zgue08 сент. 2017 г., 22:15
Где вы хотите показать информацию?

Ответы на вопрос(4)

в себя разбиение на страницы и один пример с mat-sort-header в столбце 'name'. Мне пришлось переопределить mat paginator и выполнить пользовательскую сортировку, чтобы убедиться, что расширяемая строка все еще оставалась родительской при сортировке. Этот пример также позволяет открывать несколько строк одновременно и закрывать все строки

https://stackblitz.com/edit/angular-material2-issue-zs6rfz

Material Table, с помощьюmd-rowв обычной таблице была жизнеспособной альтернативой, но так как@angular/material 2.0.0-beta.12 угробилCDK таблицы и теперь имеют свои собственные таблицы данных, которые могут соответствовать вашим потребностям. Смотрите документацию ниже:

https://material.angular.io/components/table/overview

но вы можете решить это с помощью небольшого пользовательского кода. Взгляни наэто обсуждение а такжеэто решение (не от меня, но основание для этого ответа).

Вкратце: используйте таблицу материалов и добавьте метод click к строкам:

<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>

Добавьте компонент для расширенной области.row_detail.html содержит HTML, который находится в расширенной области.

@Component({
  selector: 'app-inline-message',
  templateUrl: 'row_detail.html',
  styles: [`
    :host {
      display: block;
      padding: 24px;
      background: rgba(0,0,0,0.03);
    }
  `]
})
export class InlineMessageComponent {
  @Input() content1: string;
  @Input() content2: string;
}

В вашем компоненте, где находится таблица, вам нужен метод для расширения строки. Сначала добавьте это в ваш компонент ...

expandedRow: number;
@ViewChildren('myRow', { read: ViewContainerRef }) containers;

... а затем добавьте метод:

/**
   * Shows the detail view of the row
   * @param {number} index
   */
expandRow(index: number, row: DataFromRowFormat) {

    if (this.expandedRow != null) {
      // clear old message
      this.containers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
    } else {
      const container = this.containers.toArray()[index];
      const factory: ComponentFactory<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1= "some text";
      messageComponent.instance.content2 = "some more text";
    }
}
 andreisrob14 февр. 2019 г., 06:00
Добавлятьthis.expandedRow = index в концеelse блок вexpandRow метод
 CruelEngine29 нояб. 2018 г., 09:41
это то, что я искал, и это соответствует моим потребностям. Спасибо :)
 andreisrob14 февр. 2019 г., 16:35
Проверьте этоstackblitz реализовать анимацию, когда динамический компонент создается и уничтожается при каждом нажатии
 Matt11 янв. 2019 г., 19:51
Мне нравится это решение, создающее динамический компонент лучше, чем решение, показанное @Philipp Kief выше (назовем эту одну динамическую строку). Динамическое решение для строк начинает вызывать некоторое горе вокруг разбивки на страницы и сортировки, так как это портит строки таблицы. Это решение, динамический компонент, также дает вам возможность легко делать все остальное с компонентом, который вы обычно делаете.
 Rasta26 апр. 2018 г., 18:07
Это тот, который работал для меня, я думаю, потому что я работаю с пользовательским источником данных, большое спасибо
Решение Вопроса

Вот Эндрю Сегин, это уже выполнимо из коробки: используяwhen сказуемое.

Смотрите этот пример:https://stackblitz.com/edit/angular-material-expandable-table-rows (спасибо Лакстону)

Внутриmat-table тег вы должны использоватьmat-row компонент сmatRipple директивы. Когда вы нажимаете на строку, элемент строки будет назначенexpandedElement переменная:

<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row">
</mat-row>

Но теперь мы должны добавить нашу расширенную строку, которая по умолчанию скрыта и будет показана, если пользователь нажмет на строку выше:

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

Важно здесь уже упоминалосьwhen сказуемое. Это называетсяisExpansionDetailRow функция, которая определена в самом компоненте и проверяет, имеет ли строкаdetailRow свойство:

isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');

С RC0 первый параметр это индекс:

isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');

Если вы хотите иметь расширенное представление для каждой строки, вы должны добавить «ExpansionDetailRow», идентифицируемыйdetailRow свойство для каждой строки, как это:

connect(): Observable<Element[]> {
    const rows = [];
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    return Observable.of(rows);
}

Если бы вы войтиrows переменная для вывода на консоль, это будет выглядеть так:

РЕДАКТИРОВАТЬ: ПОЛНЫЙ ПРИМЕР С ИСПОЛЬЗОВАНИЕМ DIRECTIVE

Расширяемые строки таблицы Mat (сортировка, разбиение на страницы и фильтрация)

 Philipp Kief28 янв. 2018 г., 23:52
@David Вот пример с разбиением на страницы, сортировкой и фильтрацией:stackblitz.com/edit/... (спасибоshlomiassaf). Он использует другой подход, который лучше для этого случая, чем в примере выше.
 wolfhoundjesse12 янв. 2018 г., 19:20
Неважно. Я вижу, что вы можете сделатьlet row; let index = index прямо в определении ячейки, чтобы получить свойства строки.
 wolfhoundjesse12 янв. 2018 г., 18:38
Есть ли способ получить индекс в отдельной ячейке, чтобы можно было щелкать только по этой ячейке? Кроме того, этоwhen Решение очень хорошее! Я внедряю компонент деталей, который извлекает дополнительные данные из API, поэтому я не уверен, что это имело бы смысл здесь.
 non4me24 мая 2018 г., 09:32
Это решение, к сожалению, не поддерживает разбиение на страницы и сортировку!
 Knight26 июл. 2018 г., 15:37
Я получаю следующую ошибку:TypeError: Cannot read property 'sticky' of undefined

Ваш ответ на вопрос