angular-material

问题 I have a list of items which I need do order. To do so, I'd like to drag and drop. I'm using Angular Materials list solution, but my list waps to a new line (flex-wrap) When I have multiple rows, it doesn't put the items in where they sholud be. Heres an example; https://stackblitz.com/edit/angular-dnd-list-multirow Does anyone know how to make this work? Thanks. 回答1: The problem if you use an unique cdkDropList is that when you drag all the items reorder. I suggest an aproximation that

问题 I have a list of items which I need do order. To do so, I'd like to drag and drop. I'm using Angular Materials list solution, but my list waps to a new line (flex-wrap) When I have multiple rows, it doesn't put the items in where they sholud be. Heres an example; https://stackblitz.com/edit/angular-dnd-list-multirow Does anyone know how to make this work? Thanks. 回答1: The problem if you use an unique cdkDropList is that when you drag all the items reorder. I suggest an aproximation that

问题 I am using angular material datepicker https://material.angular.io/components/select/overview but this returns only the date and not the current time : Mon May 28 2018 00:00:00 GMT+0530 (IST) Is there any way I can get the current time also from this? 回答1: You can use the ngModelChange to parse the date before set it to your model, i recommend you momentJS for easy date manipulations. in the HTML <input [ngModel]="date" (ngModelChange)="onDataChange($event)" matInput [matDatepicker]="picker"

问题 I'm trying to materialize angular code for carousel. The carousel is associated to a dynamic array but when i use *ngFor with carousel class its not working. I tried writing the class="carousel-item" inside for loop but console shows: Cannot read property 'clientWidth' of undefined. This code not working: Template: <div class="carousel carousel-slider"> <div class="carousel-item" href="#one!"> <div *ngFor ="let item of items;let i = index"> <img src={{items[i]}}> </div> </div> </div>

问题 I'm trying to materialize angular code for carousel. The carousel is associated to a dynamic array but when i use *ngFor with carousel class its not working. I tried writing the class="carousel-item" inside for loop but console shows: Cannot read property 'clientWidth' of undefined. This code not working: Template: <div class="carousel carousel-slider"> <div class="carousel-item" href="#one!"> <div *ngFor ="let item of items;let i = index"> <img src={{items[i]}}> </div> </div> </div>

问题 My setup is an Angular Material data table with clickable rows. When a row is clicked, its contents are shown inline in a textarea for editing. My only problem is, I try to move input focus to the shown textarea . I tried to do it using @ViewChild , but it's being populated later, when the click handler has already executed. Some code, to illustrate: app.component.ts: import {Component, ElementRef, ViewChild} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app

问题 My setup is an Angular Material data table with clickable rows. When a row is clicked, its contents are shown inline in a textarea for editing. My only problem is, I try to move input focus to the shown textarea . I tried to do it using @ViewChild , but it's being populated later, when the click handler has already executed. Some code, to illustrate: app.component.ts: import {Component, ElementRef, ViewChild} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app

问题 I have a CSS problem when I pass my mouse over a mat-form-field . To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the mat-form-field . .mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white

问题 I have a CSS problem when I pass my mouse over a mat-form-field . To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the mat-form-field . .mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white

问题 How do we properly add a secondary buttons inside a mat-nav-list? Here is my example: <mat-nav-list> <h3 matSubheader>This is the listview</h3> <a mat-list-item [routerLink]="['/detail']"> <span matLine>Title</span> <button mat-icon-button (click)="onAdd()"> <mat-icon>add</mat-icon> </button> <button mat-icon-button (click)="onRemove()"> <mat-icon>delete</mat-icon> </button> </a> </mat-nav-list> In this code I expected the onAdd() or onRemove() to execute ALONE, but the page navigates