标签: angular-material

主列表页面有编辑按钮.这将打开已编辑行的详细信息.
方式1:现在,如果我设置"ctrl.parent.q_details.client_location"它将与父列表控制器绑定,它作为双向绑定工作并自动更改值,如编辑框中的更改,这不是必需的.
这里我只想显示并允许在inputbox中编辑值.不希望在父控制器中更改.

►以下是父控制器中调用mdDialog的代码

$mdDialog.show({
                locals:{parent: $scope},                
                clickOutsideToClose: true,                
                controllerAs: 'ctrl',                
                templateUrl: 'quotation/edit/',//+edit_id,
                controller: function () { this.parent = $scope; },
            });

►以下是弹出式mdDialog的代码.

<md-dialog aria-label="">
    <div ng-app="inputBasicDemo" ng-controller="deliverController" layout="column">
        <form name="" class="internal_note_cont">           
            <md-content class="md-padding">             
                <md-input-container class="md-input-has-value" flex>
                    <label>Client Name</label>
                    <input ng-model="qe.client_name" required >
                </md-input-container>
                <md-input-container flex>
                    <label>Client Location</label>
                    <input required ng-model="ctrl.parent.q_details.client_location">
                </md-input-container>                   
            </md-content>
        </form>
        <div>           
        </div>
    </div>
    <input type="" required ng-model="ctrl.parent.q_details.recid">  
</md-dialog>

Way2:第二种方法是直接从DB发送值而不绑定到Dialog控制器的ng-model(deliverController).

]).controller("deliverController", ["$scope", "$filter","$http","$route","$window","$mdDialog",
    function ($scope, $filter,$http,$route,$window,$mdDialog) {
        $scope.qe.client_name = '12345'; // just to test.        
    } …

我有一个关于Angular Material(Angular 4+)的问题.在我的组件模板中说我添加了一个<mat-horizontal-stepper>组件,并且在每个步骤中<mat-step>我都有步进按钮来导航组件.像这样......

<mat-horizontal-stepper>
  <mat-step>
    Step 1
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 2
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 3
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
</mat-horizontal-stepper>

现在我想知道是否有可能从每个步骤中删除按钮并将它们<mat-horizontal-stepper>放在静态位置的其他位置,甚至在其他位置之外<mat-horizontal-stepper>,我可以使用组件打字稿文件中的代码向后和向前导航.为了给出一个想法,我希望我的HTML就像这样

<mat-horizontal-stepper>
    <mat-step>
        Step 1
    </mat-step>
    <mat-step>
        Step 2
    </mat-step>
    <mat-step>
        Step 3
    </mat-step>
    <!-- one option -->
    <div>
       <button mat-button matStepperPrevious type="button">Back</button>
       <button mat-button matStepperNext type="button">Next</button>
    </div>
</mat-horizontal-stepper>

<!-- second …

我正在使用此模板开展项目.

模板是使用AngularJs和Bootstrap-UI(有角度的bootstrap)编写的,我想包括一些Material Design元素,如卡片和其他.

有可能吗？推荐吗？我的事情是我们已经喜欢这个模板以及它的许多元素,但是Material Design有卡片,下拉,带有标签动画等的文本输入,例如令人惊叹.

所以我的问题是:

AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster？

使用ng add @angular/material为 Angular 项目添加 Material 支持时有提示Set up global Angular Material typography styles?

这究竟意味着什么？文档说明出现了提示，但没有描述其实际含义。

使用$mdToast.simple().content("some test")它时显示黑色烤面包.如何将该颜色更改为红色,黄色等,取决于错误消息的类型,如错误,警告和成功.

与此类似的问题.

我是角度5开发的新手.我正在尝试使用此处提供的示例开发带有角度材质的数据表:" https://material.angular.io/components/table/examples ".

我收到一个错误说 Can't bind to 'dataSource' since it isn't a known property of 'table'.

请帮忙.

角版本 9.2.0

当我MatToolbarModule在模块中导入并在 html 模板中使用它时，我收到以下错误消息：

这可能意味着声明 MatToolbarModule 的库 (@angular/material/toolbar) 没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新。还可以考虑与库的作者核对以查看该库是否与 Ivy 兼容。

8 export declare class MatToolbarModule {
                       ~~~~~~~~~~~~~~~~
src/app/angular-material.module.ts:53:14 - error NG6002: Appears in the NgModule.imports of ComponentsModule, but itself has errors

Run Code Online (Sandbox Code Playgroud)

有没有人面临同样的问题？

如何更改下面的Angular Material代码,以便数据表按'name'列排序,默认按升序排序.必须显示箭头(表示当前排序方向).

这就是我想要实现的目标:

原始代码:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

我正在尝试这样的东西,但它不起作用(没有箭头显示,没有排序)

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

这是Plunker的链接

使用新的Angular-Material版本,您需要为Angular-Animations添加模块.您可以在两个BrowserAnimationsModule和NoopAnimationsModule之间进行选择.在官方指南中指出:

某些Material组件依赖于Angular动画模块,以便能够执行更高级的过渡.如果您希望这些动画在您的应用中运行,则必须安装@ angular/animations模块并在应用中包含BrowserAnimationsModule.

npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Run Code Online (Sandbox Code Playgroud)

如果您不想为项目添加其他依赖项,则可以使用NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Run Code Online (Sandbox Code Playgroud)

我不太明白这里有什么区别.似乎完全一样:)两个模块之间有什么区别？

我已经安装了角度材料,

我在我的app模块上导入了MatIconModule(带import { MatIconModule } from '@angular/material/icon';)

我在我的ngmodule导入下添加了:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

我已经导入了所有样式表

我还在我的应用程序组件中导入它,实际上(尝试)使用它们(import {MatIconModule} from '@angular/material/icon';在它的开头有另一行).

但材料图标仍然没有出现.

例如,使用此行:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

我期待这样的事情:

但我明白了:

有什么建议吗？