angular-material

问题 People who want paging and sorting on client side please refer this link Here is what I tried. The data is loading in the console. but it is not displayed on the grid or mat table. I don't have any error in the console. I am able to see the data in the console but the data is not loaded into the grid. Can somebody tell me what am I doing wrong? The actual database from where data is emitted out. export class FormsDatabase { formsList = new BehaviorSubject([]); get data(){ return this

问题 I'm trying to edit some member's firebase data with a mat-select component composed of different types. I'm not sure with my structure of nodes but I did this : member: member1: name: types: typekey1 : Title1 typekey3 : Title3 ... types: typekey1: key: typekey1 title: Title1 typekey2: key: typekey2 title: Title2 typekey3: key: typekey3 title: Title3 ... So I can't make the following function compareFn(t1: Type, t2: Type): boolean { return t1 && t2 ? t1.key === t2.key : t1 === t2; } to work

问题 I'm trying to use the Datepicker component in Angular Material. Here is my HTML code: <input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled> <mat-datepicker #picker disabled="false"></mat-datepicker> However, it's not working for me and I'm getting the following error: Error: MatDatepicker: No provider found for DateAdapter. The error message tells me that I need to import MatNativeDateModule as well as MatDatepickerModule but I have done that. Here is my import code

问题 How to set vertical alignment for mdRadioButton directive of Angular Material related to text? I have tried both layout-align and vertical-align style but, the radio button is always align middle related to the text. here is the plunker <md-content> <md-radio-group ng-model="data" style="vertical-align:top;"> <md-radio-button value="a" aria-label="Label 1" style="vertical-align:text-top;">long text 1</md-radio-button> <md-radio-button value="b"> long text 2 </md-radio-button> </md-radio-group

问题 Does anyone know how in the table from this example: https://stackblitz.com/angular/dlxbkjqaoba?file=app%2Ftable-basic-example.ts Make it so that the columns are directed horizontally, roughly like in the picture: 回答1: You can use invert the table in an ngOnInit() method in the class to give the required data structure and then iterate over the column list in the HTML to give the required columns. Below is an example: ts file: import {Component, OnInit} from '@angular/core'; /** * @title

问题 I am implementing the angular/material tree component and having some problems. After saving changes to the tree I am resetting the data backing the tree (which works) however the app then becomes incredibly slow, expanding nodes can take about 8 seconds. What makes this even weirder is that the code that actually manipulates the data source is run in other places, such as adding a new child to the tree - we want the UI to update, and this does not cause a problem. It is only when saving that

问题 I would like to combine twitter bootstrap together with angular material. I found bootstrap material design https://github.com/FezVrasta/bootstrap-material-design Angular material uses following declarations; <script src="../bower_components/angular/angular.min.js"></script> <script src="../bower_components/angular-animate/angular-animate.min.js"></script> <script src="../bower_components/angular-aria/angular-aria.min.js"></script> <script src="../bower_components/angular-material/angular

问题 I'm having a problem in Angular Material Table, although it is technically correct, but I'm thinking if there's another way around for this. Let say that I do have 5 codes, F1 , F2 , F5 , F9 , F10 . The Angular Material Table ascending sort order of this will be, F1 F10 F2 F5 F9 But I'm expecting it to be F1 F2 F5 F9 F10 My html code is here <table mat-table [dataSource]="model.financingPurposeList" class="mat-elevation-z8" width="100%"> <ng-container matColumnDef="code"> <th mat-header-cell

问题 I thought I can combine the examples from Angular for dropdown and the Input with clear box to: <mat-form-field > <mat-select placeholder="Country" [(value)]="selectedCountry" (selectionChange)="emitItemChanges()"> <div *ngFor="let item of lstItems|async"> <mat-option *ngIf="addItem(item)" [value]="item">{{item.title}}</mat-option> </div> </mat-select> <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button aria-label="Clear" (click)="selectedCountry=undefined"> <mat-icon>close<

问题 We need help in changing the scrollbar in the Select component from Angular Material. The following demo was implemented. https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts However, I need help in changing the width and style of the scrollbar. Example 回答1: Usually the way to customize the scroll is: /* width */ ::-webkit-scrollbar { width: 20px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit