- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个问题有点不知所措。我有 Material 扩展面板,通过循环包含我拥有的数据的变量来填充标题,这是一个对象数组 - 在该对象数组中,有一个键,其值为扩展面板标题。还有一个键,其值是另一个对象数组,我想遍历其中以填充每个扩展面板内的 Material 表。
这是我目前所拥有的......
titleGroups.ts:
export const titles = [
{
title: 'First Title',
titleId: 'firstTitle',
info: [
{ name: 'Info One', code: 'infoOne' },
{ name: 'Info Two', code: 'infoTwo' },
{ name: 'Info Three', code: 'infoThree' },
{ name: 'Info Four', code: 'infoFour' }
]
},
{
title: 'Second Title',
titleId: 'secondTitle',
info: [
{ name: 'Package', code: 'package' },
{ name: 'Package Two', code: 'packageTwo' }
]
},
{
title: 'Third Title',
titleId: 'thirdTitle',
info: [
{ name: 'Widget One', code: 'widgetOne' },
{ name: 'Widget Two', code: 'widgetTwo' },
{ name: 'Widget Three', code: 'widgetThree' },
{ name: 'Widget Four', code: 'widgetFour' }
]
}
]
title.component.ts:
import {Component} from '@angular/core';
import {SelectionModel} from '@angular/cdk/collections';
import {MatTableDataSource} from '@angular/material';
import {titles} from './titleGroups';
export interface TitleNames {
name: string;
}
const TITLES: any[] = titles;
let TITLE_NAMES;
for(let i = 0; i < TITLES.length; i++)
for(let j = 0; j < TITLES[i].info.length; j++)
TITLE_NAMES = TITLES[i].info;
@Component({
selector: 'aa-titles',
templateUrl: './aa-titles.component.html',
styleUrls: ['./aa-titles.component.scss']
})
export class TitlesComponent {
displayedColumns: string[] = ['select', 'name'];
dataSource = new MatTableDataSource<TitleNames>(TITLE_NAMES);
selection = new SelectionModel<TitleNames>(true, []);
titleData: any;
constructor() {
this.titleData = TITLES;
}
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
}
title.component.html:
<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let item of titleData">
<mat-expansion-panel-header>{{item.title}}</mat-expansion-panel-header>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
</mat-expansion-panel>
</mat-accordion>
发生的事情是,在每个扩展面板下,它仅显示每个扩展面板下 titleGroups.ts 中标题的最后一个元素的数据。
我想要的是对应的扩展面板显示正确的数据
第一个显示表格的标题扩展面板显示:
信息一
信息二
信息三
信息四
第二个标题扩展面板显示表格:
包
套餐二
等等。我不知道如何做到这一点 - 任何帮助将不胜感激,谢谢!
最佳答案
您应该为每个表定义单独的 dataSource
-s 和 selectionModel
-s:例如,您可以在 constructor
中定义这样的数组:
this.titlesForIterate = titles.map(item => {
// I'm not doing it here, but you can also deep clone the item object first
item.dataSource = new MatTableDataSource<WidgetNames>(item.info);
item.selectionModel = new SelectionModel<TitleNames>(true, []);
return item;
};
然后在expansionPanels的*ngFor
中使用titlesForIterate
。
<mat-expansion-panel *ngFor="let item of titlesForIterate">
然后在每个 expansionPanel 中为它们的表使用它们自己的 dataSource
和 selectionModel
成员。
<table mat-table [dataSource]="item.dataSource" class="mat-elevation-z8">
...
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="item.selection.hasValue() && isAllSelected(item)"
[indeterminate]="item.selection.hasValue() && !isAllSelected(item)">
</mat-checkbox>
...
注意:不要忘记重构 isAllSelected
方法以接收父对象作为参数。
关于javascript - Angular 6 - 循环遍历 Material 扩展面板内的 Material 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52522008/
我有一个 Bootstrap 面板,里面有另一个面板。两者在面板标题中都有一个字形图标。默认情况下,面板是折叠的。当面板折叠时,将设置 glyphicon-unchecked。当我点击这个字形图标时,
使用 Grafana 时,我们会在某些电视上使用它。有谁知道制作它的方法,如果有人添加面板,更改布局等,它不仅会自动刷新数据,还会自动刷新实际仪表板? 我们真的厌倦了不断要求具有远程访问权限的人登录并
基本上,我试图让屏幕底部有 3 个按钮,然后在屏幕中间有一个包含文字的标签。但是,我似乎无法同时在 GUI 中同时拥有按钮和标签。我是一名初学者,对布局了解不多(即使我已经阅读过它们),因此任何帮助/
作为学校的类(class)作业,我们必须提出一个自定义项目,我选择了一个原本打算在 ActionScript 上编写的游戏创意,但决定在 Java 上插入它。最初进展顺利,游戏代码正常运行, Spri
我正在尝试使用 Java Graphics 制作一个生命模拟游戏,但是当运行我的代码时,屏幕的左侧三分之一是灰色的。我希望整个屏幕是白色的,黑色方 block 代表生命方 block 。我对所有 ja
下面是动态驱动的一个不错的“下拉面板”。 http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm 如您所见,它是一个面板,在打开时
所以我有这个函数 onDisplayError ,如果请求失败,每次都会调用它。这意味着如果用户按下保存按钮并且 3 个请求失败,我当前会收到 3 个弹出消息。我的目标是此函数检查我的弹出窗口是否已打
我正在尝试为我的一个类(class)制作一款游戏,但在实现一些我想做的事情时遇到了麻烦。本质上,我希望在同一个图形用户界面窗口中包含多个不同的部分。 据我了解,我会使用 JPanel 来创建这些不同的
我目前正在测试这种类型的面板 jquery: http://codyhouse.co/gem/css-slide-in-panel/ 但是当我想检测从顶部滚动以显示一个 div 时:没办法:( 一种检
我可能正在搜索错误的问题,但我找不到这个问题的答案。 我有一个 AutoScroll 设置为 true 的面板。控件动态添加到面板。我需要在滚动条可见时触发一个事件,但我找不到这样的事件。 如有任何建
我有一堆 Bootstrap 面板,其中一些是相互关联的。有点像 Panel A -> Panel B -> Panel C 当用户单击面板 B 时,将显示面板 C,当单击面板 C 时,将显示面板 D
我正在尝试开发一种带有指标的下拉列表,并相应地针对应该出现在仪表板上的选定指标特定面板。反之亦然,如果未选择指标,则面板应隐藏。 我找到了链接 http://search-devops.com/m/k
我有一个窗口,窗口里面有面板。我动态地向面板添加组件。这些组件采用“hbox”布局,以便它们水平排列。单击按钮后,我将在“hbox”布局中再向面板添加一行类似组件。这里的问题是我想在第一行下面添加第二
我使用 jQuery Accordion 将表单拆分为多个面板,并使用 jQuery 验证来检查所需字段。只要验证字段位于打开的面板中,它就可以很好地显示已验证字段中的错误。 举个例子。假设我有三个
我正在尝试检查我的面板是打开还是关闭。 我尝试过这样的: $(document).on('open', '.ui-panel', function(){ console.log('open');
我有一个面板,我想将其 float 在所有窗口之上并出现在所有空间中。这可以通过 轻松完成 [self.panel setLevel:kCGUtilityWindowLevel]; [self.win
我想在格子中的单个面板上叠加多个组,并且想要独立的回归线。 获得多个面板相当容易,每个面板都有一条使用条件因子的回归线: xyplot( Petal.Width ~ Petal.Length |
Delphi 有滑动(动画)面板组件吗? 例如可以在 Raize Components 中找到它(带有“热点”或隐藏/显示按钮的左侧面板)。 我不需要一个可调整大小的面板,而是一个可以从左向右水平平滑
我有一个 Bootstrap Accordion : 我想禁用非事件面板中的所有输入控件。仅验证事件面板。 我有一个检测事件选项卡的功能: $(".panel").on("show.bs.collap
我正在尝试将组件放入不同尺寸的面板中。但是,我意识到 GridLayout 将大小相同的部分分开。如何实现如下图所示 enter image description here import java.
我是一名优秀的程序员,十分优秀!