angular-material2

问题 I have used Angular Material in my application and I have two mat-table with sorting on single component but my sorting is working only on first table here is ts code @ViewChild(MatSort) inventoryDataSort: MatSort; @ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator; @ViewChild(MatSort) additionalDataSort: MatSort; @ViewChild(MatPaginator) additionalDataPaginator: MatPaginator; ngAfterViewInit() { this.inventoryDataSource.sort = this.inventoryDataSort; this.inventoryDataSource

问题 I'm trying to set form control using *ngFor over objects in an Array. Depending on the users sometimes I will have 1 object in the Array but other times multiple. My issue is that I want to create a formControlName using the loop which I can but not sure how to set form group validators in the component? Just setting them like below means if there is only 1 object the form remains invalid while looking for the other formControlName that does not exist. So if the first object with name:"Days"

问题 I'm using Angular Material with Angular. My table does not display data on the ngOnInit lifecycle hook, but after I refresh the app it displays: Even ChangeDetectorRef doesn't affect the table. Here is the template for the table: <div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <ng-container matColumnDef="Phone"> <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell> <mat-cell *matCellDef="let user"> {{ user.phone }} </mat-cell> </ng

问题 I'm trying to use a custom theme but I keep getting the error: { "status": 1, "file": "/home/adam/Projects/test-material/src/unicorn.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: ~@angular/material/theming.\nParent style sheet: /home/adam/Projects/test-material/src/unicorn.scss", "formatted": "Error: File to import not found or unreadable: ~@angular/material/theming.\n Parent style sheet: /home/adam/Projects/test-material/src/unicorn.scss\n on line 1 of

问题 Suppose I have this component: @Component({ selector: 'pizza-dialog', template: ` <h1 md-dialog-title>Would you like to order pizza?</h1> <md-dialog-actions> <button (click)="dialogRef.close('yes')">Yes</button> <button md-dialog-close>No</button> </md-dialog-actions> ` }) export class PizzaDialog { constructor(public dialogRef: MdDialogRef<PizzaDialog>) { } } I've already imported MdDialog into my app module: @NgModule({ imports: [ BrowserModule, MaterialModule.forRoot(), MdDialogModule

问题 I have 2 material 2 tables in the same component with sorting. I cannot find a way to assign the MatSort directive to its own table. I'm only able to use MatSort on the first table and the second table doesn't recognize there is a MatSort on it. Does anyone know how to configure two tables with sorting in the same component? I've tried defining the ViewChild with different names, but it didn't work. @ViewChild('hBSort') hBSort: MatSort; @ViewChild('sBSort') sBSort: MatSort; this.hBSource =

问题 So I get the following error when I tried building my application again: ERROR in ../../../node_modules/@angular/cdk/a11y/typings/aria-describer/aria-describer.d.ts(8,42): error TS2307: Cannot find module '@angular/core This error occurred while I was developing my angular application. I apparently got this whilst I was programming but I didn't notice it because the application simply just kept compiling whenever I made some changes. This error only started to prevented me from building the

问题 I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container ? which is hidden. Only added when I click the modal and when you open the chrome dev tools you can see the md-dialog-container appearing. Do include how to override the rest of the styling. Much appreciate with some help. Thanks. 回答1: From the official documentation: Styling

问题 I have somebuttons <button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab> BYE </button> <button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab> HI </button> The tooltips show on "hover" by default. Is there a way to make it always show? (Show on page load and stay) 回答1: First add imports: import {MdTooltip} from '@angular/material'; then add reference names to tooltips: <div> <button #tooltipBye="mdTooltip" mdTooltip="bye" mdTooltipPosition="below" md-mini-fab> BYE </button>

问题 This is the almost same question as Typescript getCurrent location and pass to backend to get the result and pass to Material Table data source, but this question I only got the answer for how to get the current location and pass to backend and which it works by libertyernie's answer. Therefore I ask this one... Here is the issue: I want to use Angular Material 2 table to display the list of restaurant (which is come from my spring-boot backend). And based on the tutorial they gave on github,