标签: angular-material2

我正在使用angular/material2,我正试图让一个黑暗的主题.按照https://material.angular.io/guide/theming上的文档,我定义了我的自定义theme.scss如下:

$dark-primary: md-palette($md-pink, 700, 500, 900);
$dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
$dark-warn:    md-palette($md-deep-orange);

$dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

@include angular-material-theme($dark-theme);

主要,重音和警告颜色显示在我的自定义主题中,但我没有看到黑暗的主题(即黑色背景和前景颜色相应地更改).

在随文档提供的示例中,我看到背景已经通过css类设置,但这不是我期望的行为; dark-theme在我看来,具有适当自动化水平的特定"类型"主题.

我错了吗 ？有人可以帮我澄清一下这个问题吗？

我想检查一下我的

<md-sidenav>

正在关闭。有没有一种方法可以使用sidenav对象的EventEmitter onClose进行检查？你能给我一个例子吗？

我想使用pagination的angular-material2.我面临的问题是md-paginator通过服务动态设置值.

我已设法使用静态值创建分页但我不知道如何动态设置它们.

Plunker

TS

import {Component,ChangeDetectorRef, Input,ViewChild } from '@angular/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
import {MdPaginator,PageEvent} from '@angular/material';
import {DataSource} from '@angular/cdk';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';

@Component({
  selector: 'table-http-example',
  styleUrls: ['table-http-example.css'],
  templateUrl: 'table-http-example.html',
})
export class TableHttpExample {
  displayedColumns = ['dbquery', 'title'];
  exampleDatabase: ExampleHttpDatabase | null;
  dataSource: ExampleDataSource | null;
   pageEvent: PageEvent;

  @ViewChild(MdPaginator) paginator: MdPaginator;

  constructor(private http: Http) { …

我已经添加了自定义主题文件，并且希望在整个站点上减小字体大小。我不知道如何通过自定义主题更改字体大小，因为没有适当的文档。

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify …

我遇到的问题是,snackbar组件在初始化时附加在cdk-global-overlay-wrapper之外(在cdk-overlay-container中)

这使得它在屏幕中间瞬间可见

它然后消失并重新附加在cdk-global-overlay-wrapper中并从底部滚动它应该.

任何想法如何改变这个？

由于某种原因，我收到此错误

无法绑定到“ dataSource”，因为它不是“ mat-tree”的已知属性。

我不知道该如何解决

我尝试使用角度材质2 6.0.0-beta.3，其中该版本首次具有treeview组件，对解决此错误的任何帮助都会有所帮助。

package.json

  "dependencies": {
    "@angular/animations": "^6.0.0-beta.5",
    "@angular/cdk": "^6.0.0-beta.4",
    "@angular/common": "^6.0.0-beta.5",
    "@angular/compiler": "^6.0.0-beta.5",
    "@angular/core": "^6.0.0-beta.5",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^6.0.0-beta.5",
    "@angular/http": "^6.0.0-beta.5",
    "@angular/material": "^6.0.0-beta.3",
    "@angular/material-moment-adapter": "^6.0.0-beta.5",
    "@angular/platform-browser": "^6.0.0-beta.5",
    "@angular/platform-browser-dynamic": "^6.0.0-beta.5",
    "@angular/router": "^6.0.0-beta.5",
    "@types/three": "^0.89.6",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.20.1",
    "ng2-truncate": "^1.3.11",
    "orbit-controls-es6": "^1.0.10",
    "rxjs": "^5.5.6",
    "stats.js": "^0.17.0",
    "three": "^0.89.0",
    "three-orbit-controls": "^82.1.0",
    "zone.js": "^0.8.19"
  },

app.component.html

<mat-tree [dataSource]="data" [treeControl]="tc">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
        <li>
            <div>
                <button mat-icon-button disabled>
          <mat-icon>
            remove
          </mat-icon>
        </button>
        {{node.name}}
            </div>
        </li>
    </mat-tree-node> …

我正在使用选择数据表

取消选择我们使用的所有行:

this.selection.clear();

其中selection是SelectionModel类的对象.现在,如果我想从"组件打字稿代码"后面的代码中删除特定行的选择,那么有什么有用的"angular"语句就像clear()方法一样？

我一直在绞尽脑汁，并与已经完成的工作实现进行比较，但是由于某种原因，我<mat-table>没有渲染列或标题。

我已经在这个项目中实施了几次，所以我知道我有正确的导入以及一切正常运行所需的一切。

我的HTML如下：

<div class="indexBlock">
    <div id="inputs">
        <mat-form-field id="filterFormField">
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    </div>
    <div id="tableDiv">
        <mat-table #matTable [dataSource]="unconfDataSource">
            <ng-container matColumnDef="Supplier">
                <mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.Supplier}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="ContainerNo">
                <mat-header-cell *matHeaderCellDef>Container No</mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.ContainerNo}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="InvoiceNum">
                <mat-header-cell *matHeaderCellDef>Invoice Num</mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.InvoiceNum}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="VesselName">
                <mat-header-cell *matHeaderCellDef>Vessel Name</mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.VesselName}}</mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let myRowData; columns: displayedColumns" (click)="SelectImport(myRowData)"></mat-row>
        </mat-table>
    </div>
</div>

Ive将其简化为仅几列，并删除了我的排序和分页器，以尝试使其正常运行。

我的控制器是：

export class UnconfirmedComponent implements OnInit {
    unconfDataSource: MatTableDataSource<ImportHead>;
    displayedColumns: [ …

我正在尝试使用多个复选框来自定​​义Mat-select。由于某些原因，面板的最小宽度错误，如下所示：

而且我不知道它的最小宽度在哪里计算。我也尝试添加panelClass并重写此类的最小宽度，例如：

<mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple>      

&.multiple-panel {
   min-width: 200px !important;
}

但是，当打开下拉菜单时，其打开的宽度为原始宽度（如图所示），并在几毫秒后“跳转”到面板类上定义的自定义最小宽度。

我发现很难选择垫子样式。有人知道如何解决这个问题吗？

是否有与网格列表配合使用的虚拟滚动实现？我认为默认实现不会起作用，因为每一行周围都应有一个元素。

我正在使用网格列表显示个人资料图片，并且需要无限滚动或最好是虚拟滚动才能加载新的图片。