md-icon的文档描述了如何在几个部分中使用font-awesome,并建议我们最终可以使用font-awesome
<md-icon fontSet="fa" fontIcon="alarm"></md-icon>
但是文档非常令人困惑,我几乎找不到通过Google为md-icon注册第三种字体集如font-awesome的例程.
任何帮助表示赞赏!
PS:我知道通常的<i>方法通常有效,但在一些最初使用md-icon的例子中似乎没有用.
我用angular2材料MdDialog来展示一个表格.
当用户提交表单时,会向后端发送请求,如果请求成功,我需要关闭对话框.如果后端请求失败,我需要保持对话框打开.
我可以使用下面的按钮关闭对话框.
<button md-raised-button md-dialog-close>Cancel</button>
但是,在这种情况下,我只需要在后端请求成功时关闭对话框,所以我需要一种以编程方式关闭对话框的方法.
对话框中显示的组件没有对话框参考,我不知道从组件中自我关闭对话框的任何其他方法.
有没有办法从对话框内的组件中关闭对话框？
我想在使用md-select选择值时在typescript中调用函数.在材料设计中用于此目的的属性是什么？
<md-select placeholder="State">
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
</md-option>
我有来自后端的数据流,我看到它在控制台中打印现在我正在尝试将事件推送到dataSource其抛出错误dataSource未定义.有人可以帮助如何动态添加数据到物化表？
stream.component.html
<mat-table #table [dataSource]="dataSource"></mat-table>
stream.component.ts
import {
Component,
OnInit
} from '@angular/core';
import {
StreamService
} from '../stream.service';
import {
MatTableDataSource
} from '@angular/material';
import * as io from 'socket.io-client';
@Component({
selector: 'app-stream',
templateUrl: './stream.component.html',
styleUrls: ['./stream.component.css']
})
export class StreamComponent implements OnInit {
displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
dataSource: MatTableDataSource < Element[] > ;
socket = io();
constructor(private streamService: StreamService) {};
ngOnInit() {
this.streamService.getAllStream().subscribe(stream => {
this.dataSource = new MatTableDataSource(stream);
}); …我正在使用角度材料2构建angular2应用程序.我试图将我的应用程序的背景设置为"正确的方法",但我无法弄清楚如何.
我找到了一个可以在我的<body>元素上使用的类:mat-app-background我可以添加,它给了我一个默认颜色(取决于我是使用浅色还是暗色主题).
我希望定义这种背景颜色以使用我的品牌颜色,但我无法弄清楚如何做到这一点.
在_theming.scss它中定义如下:
// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme) {
@include mat-ripple-theme($theme);
@include mat-option-theme($theme);
@include mat-pseudo-checkbox-theme($theme);
// Wrapper element that provides the theme background when the
// user's content isn't inside of a `md-sidenav-container`.
.mat-app-background {
$background: map-get($theme, background);
background-color: mat-color($background, background);
}
...
}
所以我认为尝试将背景颜色添加到我的自定义主题是有意义的,不知何故,但我无法理解如何这样做.
在Material2 主题文档中,它只说:
"在Angular Material中,主题是通过组合多个调色板创建的.特别是,主题包括:
如何将我的背景添加到主题中,或以其他任何方式执行此操作？
棱角材料2日期选择器如何配置为在焦点上自动打开？我在https://material.angular.io/components/datepicker/overview的文档中找不到任何内容.
目前的HTML是这样的:
<input [mdDatepicker]="myDatepicker" id="inputWeekEnding" name="inputWeekEnding" type="text" class="form-control" show-button-bar="false"
[(ngModel)]="weekEnding" [mdDatepickerFilter]="weekEndingPickerFilter" (ngModelChange)="weekEndingChanged()"
required>
<span class="input-group-btn">
<button type="button" class="btn btn-default" [mdDatepickerToggle]="myDatepicker">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<md-datepicker #myDatepicker md-open-on-focus ></md-datepicker>如果将md-sort-header添加到md-table中的md-header-cell中,则它始终是左对齐的.如何对标题单元格进行居中对齐,例如"名称"？
<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center">
Name
</md-header-cell>
我想知道我如何定位内部的偶数/奇数行,Angular Material Table以便我可以将偶数/奇数行设置为不同的背景颜色.
我设置了我的ClaimFileHistoryDataSource课程:
claimClientInformation: ClaimFileHistory[];
dataSource : ClaimFileHistoryDataSource;
displayedColumns = ['TypeImg', 'Description', 'Agent'];
export class ClaimFileHistoryDataSource extends DataSource<ClaimFileHistory> {
constructor(private _claimFileHistory: ClaimFileHistory[]) {
super();
}
connect(): Observable<ClaimFileHistory[]> {
return Observable.of(this._claimFileHistory);
}
disconnect() {}
}
在NgInit我打电话给我的服务去获取我需要的数据并填充DataSource:
this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
this.claimClientInformation = response;
this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});
这很好,数据正在回归.
在HTML中Mat-Table看起来像这样:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="TypeImg">
<mat-cell *matCellDef="let row"><img [src]='row.TypeImg' height="40px"></mat-cell>
</ng-container>
<ng-container matColumnDef="Description">
<mat-cell *matCellDef="let row">
<div>
<span class="d-block">{{row.Description}}</span>
<span class="d-block">{{row.Date}}</span> …我目前有textarea这样的:
<textarea matInput rows="5" cols="40" placeholder="text"></textarea>
但是,它总是相同的大小.
关于如何改变尺寸的任何想法textarea？