我希望它只是即插即用:-)我一直在喋喋不休地打了几个小时没有我的小实验工作.md数据表是新的,因此Web上几乎没有神圣的知识.找到将Firebase连接到桌面的好方法将是一个良好的开端.有任何想法吗？
目前我有这个设置.我的代码很好,没有带有标准Angular设置和代码的表,使用ngFor并从模板创建列表.因此代码使用AngularFire 2从Firebase传递数据.尝试新的md数据表是个问题.
首先,模板不会渲染.我知道我已正确设置NgModule,所以我怀疑数据源没有连接并创建此错误.这是Chrome控制台中的错误.
Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'md-table'.
1. If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
我的members- search.component.html看起来与官方文档完全相同,只是我更改了模板绑定:
<md-table #table [dataSource]="dataSource">
<ng-container cdkColumnDef="memberName">
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{member.firstName}} {{ member?.lastName }} </md-cell>
</ng-container>
members-search.component.ts包含以下相关部分:
import { DataSource } from '@angular/cdk';
@Injectable()
export class MembersAdminService {
private members$: FirebaseListObservable<Member[]>;
private dataSource: DataSource<any>;
constructor(
private …我目前正在制作一个表格,用户可以通过按Enter键来浏览可编辑元素.我也在这里使用Angular Material.
我有一个mat-form-field,带有几个动态创建的输入字段和mat-autocomplete元素.但是我的回车键事件在这方面有点不同.
当您按下输入字段时,将打开一个面板(下拉列表),用户可以在其中选择输入,或者他可以简单地自己编写,面板将提供建议(自动完成).
如果按Tab键会发生什么？
如果在键入时按Tab键,光标将移动到下一个可编辑元素,并且最新元素的面板(下拉列表)将关闭.
如果按Enter键会发生什么
如果在键入时按Enter键,光标将移动到下一个可编辑元素但是最新元素的面板(下拉列表)保持打开状态,这导致多个输入字段具有打开的下拉面板,即使用户已经写了他需要的内容至.
模板:
<tr *ngFor="let row of rows; let rowIdx = index">
<td *ngFor="let col of columns; let colIdx = index">
<mat-form-field class="example-full-width">
<input #inputs type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
(keyup.enter)="shiftFocusEnter(rowIdx, colIdx)">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</td>
</tr>
这只是根据数组中对象的数量创建行(这里不太重要).
输入字段上还有一个keyup.enter事件,当用户按下输入时会触发,同时焦点位于输入字段上,并传递行索引和列索引以获取下一个可编辑元素.
零件:
shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);
if(colIdx == 4 && rowIdx == 5) {
console.log("Reached end of …我试图使用配置传递一些属性值.但对话框无法全屏显示.
openTwigTemplate(): void {
let config = new MdDialogConfig();
config = {
position: {
top: '10px',
right: '10px'
},
height: '98%',
width: '100vw',
};
const dailog = this.dialog.open(TwigDialogComponent, config);
}
如何根据分辨率打开对话框全屏？
我有一个包含10个条目的水果列表.我想这样做,以便水果名称文本(在垫片旁边)显示在两列中,每列5个.我正在使用的芯片在这里:https://material.angular.io/components/chips/api
我的CSS:
.flexp {
display: flex;
flex-wrap:wrap;
}
.flexc {
flex-grow: 1;
display: inline-block;
}
HTML
<div class="flexp" *ngFor="let fruit of fruits">
<div class="flexc">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</div>
我怎样才能做到这一点？现在我的flexbox从上到下.
我想制作它看起来像一个表,但不必创建结构.如果有一种方法让ngFor足够聪明,以这种方式显示......这就是我要找的东西:
<table>
<tr>
<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>
</table>
如果不可能,请说明.
我需要修改标准Angular Material切换按钮组件的功能，以便单击活动按钮可使该组件返回没有按钮处于活动状态。这有两个步骤：
我尝试了几种方法，例如
模板：
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)">No</mat-button-toggle>
<mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)">Yes</mat-button-toggle>
</mat-button-toggle-group>
JS：
update_toggle(group,button){
if(group.value==""){
group.value = button.value;
}
else
{
group.value = "";
}
button.checked=!button.checked;
}
但这不会更新按钮的“已检查”值，我想是因为update_toggle（）设置的组值与用户单击按钮的行为相冲突。
唯一有效的方法是：
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)" (click)="group.value=='no' ? checked=false : checked=false">No</mat-button-toggle>
<mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)" (click)="group.value=='yes' ? checked=false : checked=false">Yes</mat-button-toggle>
</mat-button-toggle-group>
但是单个按钮上的两次单击事件感觉很棘手，特别是因为第二次单击中的三进制与本能地相反。
有什么更好的建议吗？
我试过了：
@ViewChildren('no_btn') no_btn: ElementRef;
然后：
this.no_btn['_results'][k]['_inputElement']['nativeElement']['checked']=false;
但是结果似乎与在函数中传递按钮引用没有什么不同。再次单击该按钮不会取消选中它。禁用确实有效，所以我认为我的代码是正确的：
this.no_btn['_results'][k]['_inputElement']['nativeElement']['disabled']=true;
滑动时不会同步更新垫子滑块值。
<mat-slider [(ngModel)]="myValue" step="1" min="0" max="100" ></mat-slider>
{{myValue}}
它只是在释放滑块拇指后才更新。
我正在尝试制作可重复使用的材料表，并且我想使用TemplateRefwithngTemplateOutlet来生成列。在这个例子中，我创建了cards使用我的material-table组件的组件。在cards.component.html我有我的表格列之一的模板。运行该项目将导致错误ERROR TypeError: Cannot read property 'template' of undefined（请参阅 上的控制台stackblitz）。是否可以将 columnt 模板传递给我MaterialTableComponent并使用它来定义列？
<table mat-table [dataSource]="data" class="mat-elevation-z4">
<ng-container
*ngFor="let column of displayedColumnObjects"
[matColumnDef]="column.id"
>
<!-- if where is cellTemplate in table config json, use cellTemplate -->
<ng-container
*ngIf="column.cellTemplate"
[ngTemplateOutlet]="column.cellTemplate"
>
</ng-container>
<ng-container *ngIf="!column.cellTemplate">
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.id]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: …从Angular Material Documentation 中，我可以direction在菜单组件上使用一个属性：
direction: Direction：菜单的布局方向。
这意味着有一个类型, Direction，但我找不到它，也不知道如何在菜单组件上使用它。
我尝试了以下方法，但我不确定可以在direction-attribute 中放入哪些值。我以为我可以使用类似Direction.UP或 的东西Direction.DOWN，但我无法Direction在我的项目中找到该类。是否有隐藏的地方可以从中导入？
<button mat-raised-button type="button" [matMenuTriggerFor]="saveBtn" color="primary">Ny rad</button>
<mat-menu #saveBtn="matMenu" [direction]="'up'"> <!-- Here I am using [direction], but do not know what to put as a value there, that is of type Direction -->
<button mat-menu-item (click)="save('1')">Save 1</button>
<button mat-menu-item (click)="save('2')">Save 2</button>
</mat-menu>
编辑
搜索了一段时间后，我发现我可以使用值'ltr'and 'rtl'，我不得不在使用matMenuTriggerFor- 选择器的元素上使用它。
Direction在 Visual Studio Code …
我有个问题。我没有在堆栈上找到任何熟悉的问题，所以我在这里问，是否可以<mat-selection-list>滚动（Angular 7）？当项目太多而无法容纳一个窗口时，我想在右侧显示滚动条。
<mat-card fxFlex="33%">
<mat-selection-list>
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)"
>
</mat-list-item>
</mat-selection-list>
我mat-autocomplete在我的 Angular 应用程序下使用小部件：
<mat-form-field class="col-md-3" color="warn">
<input type="text"
id="libelleShop"
#inputSelectShop
placeholder="Selectionner la boutique"
matInput
formControlName="libelleShop"
ngDefaultControl
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete""
(optionSelected)="onShopSelectionChanged($event)">
<mat-option *ngFor="let shop of shopData" [value]="shop.value">
{{shop.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
我的商店数据是这样的：
shopData = [
{name: 'AAA' , value :'11'},
{name: 'BBB', value :'22'},
{name: 'CCC', value : '33'}
];
这样的-选项被显示name，但在选择由输入displaysitvalue不是name。
知道我需要其他治疗的价值，我不会改变[value]的mat-automplete。
我如何将名称引用到输入中？
建议？？
angular-material angular-material2 angular angular-material-6