标签: angular-material

我使用角度(最新版本)和角度材料.

有3个组成部分:

• header.component,其中有一个右侧的控制按钮
• rigth-sidenav.component,其中是right-sidenav
• sidenav.component(这是左侧主菜单),这个组件调用header.component,right-sidenav.component和content

我第一次使用Angular,请告诉我,如何从另一个组件打开/关闭sidenav(在我的例子中,按钮在header.component中).

尝试了以下选项(但得到错误:TypeError:this.RightSidenavComponent.rightSidenav未定义):

header.component.html

<button mat-button (click)="toggleRightSidenav()">Toggle side nav</button>

header.component.ts

import { Component } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

    constructor(public RightSidenavComponent:RightSidenavComponent) {   }
    toggleRightSidenav() {
        this.RightSidenavComponent.rightSidenav.toggle();
    }

}

sidenav.component.html

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav mode="side" opened="true" class="sidenav"
                 [fixedInViewport]="true"> Sidenav  </mat-sidenav>
    <mat-sidenav-content>
        <app-header></app-header>
        <router-outlet></router-outlet>
        <app-right-sidenav #rSidenav></app-right-sidenav>
    </mat-sidenav-content>
</mat-sidenav-container>

sidenav.component.ts

import { Component, Directive, ViewChild } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component'; …

我检查了文档和演示,但唉!我没有找到任何使用angular-material实现多选项的参考,例如select 2.谁能告诉我如何使它工作？

我的md-select设置如下:

<md-select placeholder="Category" ng-model="current.Category" flex >
    <md-option ng-repeat="item in categories" ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>

@scope.categories 价值是

[  
{  
  "Name":"Commercial & Industrial",
  "ParentId":null,
  "Categories":[  
     {  
        "Name":"Deceptive Marketing",
        "ParentId":19,
        "Categories":[  

        ],
        "Id":24,
        "ModifiedDate":"2015-08-06T07:49:53.0489545",
        "CreatedDate":"2015-08-06T15:49:51.707"
     },
     {  
        "Name":"Aggressive Agents",
        "ParentId":19,
        "Categories":[  

        ],
        "Id":25,
        "ModifiedDate":"2015-08-06T07:50:10.0026497",
        "CreatedDate":"2015-08-06T15:50:08.63"
     }
  ],
  "Id":19,
  "ModifiedDate":"08/06/2015 @ 7:49AM",
  "CreatedDate":"08/06/2015 @ 3:49PM"
 },
 {  
  "Name":"Competitive Supply",
  "ParentId":null,
  "Categories":[  
     {  
        "Name":"Security Deposit",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":21,
        "ModifiedDate":"2015-08-06T07:49:30.3966895",
        "CreatedDate":"2015-08-06T15:49:25.8"
     },
     {  
        "Name":"Meter",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":22,
        "ModifiedDate":"2015-08-06T07:49:34.6571155",
        "CreatedDate":"2015-08-06T15:49:33.3"
     },
     {  
        "Name":"Bill",
        "ParentId":20,
        "Categories":[ …

我正在使用离子和AngularJS(AngularJS材料)构建混合应用程序.此应用程序还具有使用Node.js和socket.io构建的集成聊天.

我现在遇到的问题是,只有200条消息,应用程序加载所有消息的速度非常慢(在浏览器中为200ms - 在应用程序中为> 4秒,即使使用CrossWalk,也有使用track.id进行跟踪)并且还要在textarea中输入插入消息的速度变慢了.

我有两个解决方案来解决这个问题:

1. 虚拟重复(md-virtual-repeat)
2. 无限滚动(离子无限滚动)

1)我认为虚拟重复将是最好的解决方案(我已经在另一个页面上实现了它并且它像魅力一样滚动1500个项目)但问题是消息可以根据它们的长度和md-virtual-具有不同的高度 - 重复要求是所有元素必须具有相同的高度才能工作.

2)所以也许我们可以转向无限滚动方法,但现在的问题是使用ion-infinite-scroll指令做这件事有点棘手,因为聊天需要在到达顶部而不是底部时触发loadMore() .

所以我的问题是:有没有人有一个解决方法,在聊天中使用平滑/快速ng-repeat或者可以处理不同高度的虚拟重复指令或在顶部工作的无限滚动？

如何从json对象创建动态嵌套菜单？

我今天第一次开始使用Angular Material Design,我正在尝试使用材质设计创建嵌套菜单.对于静态内容,文档非常简单.

但我需要从json对象创建动态嵌套菜单,我无法在任何地方找到一个简单的解决方案.它只需要一层深.

json对象(不是一成不变的):

my_menu = {
    'main1': ['sub1', 'sub2'],
    'main2': ['sub1', 'sub2'],
}

这将生成类似这样但动态的:在stackblitz的预期结果示例

我尝试*ngFor在主菜单上运行这样的运行,然后在每个子菜单上分开,但它以错误结束.

<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

<mat-menu #main_menu="matMenu">
  <button *ngFor="let main_item of objectKeys(my_menu)" mat-menu-item [matMenuTriggerFor]="main_item">{{ main_item }}</button>
  <button mat-menu-item [matMenuTriggerFor]="main2">main2</button>
</mat-menu>

<mat-menu *ngFor="let sub_menu of objectKeys(my_menu)" #sub_menu="matMenu">
  <button *ngFor="let sub_name of sub_menu" mat-menu-item>{{ sub_name }}</button>
</mat-menu>

我知道这是错的,但那是我对棱角的理解结束了.

objectKeys只返回Object.keys从ts文件加载的对象的所有键.

objectKeys = Object.keys;

PS.我也是Angular的新手

在我的mat-table中，这里有6列，当任何一列没有更多的单词时，它看起来像Image-1，但是当任何一列有更多单词时，UI看起来像Image-2，那么如何将UI设置成像Image-1一样列中的第6个角中有更多单词？

图片1

图片2

user.component.html

<div class="mat-elevation-z8">      
 <table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="userimage">
    <th mat-header-cell *matHeaderCellDef> # </th>
    <td mat-cell *matCellDef="let element"> 
      <img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/>
    </td>
  </ng-container>

  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
  </ng-container>

  <ng-container matColumnDef="emailid">
    <th mat-header-cell *matHeaderCellDef> EmailId </th>
    <td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
   </ng-container>

  <ng-container matColumnDef="contactno">
    <th mat-header-cell *matHeaderCellDef> Contact No. </th>
    <td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
  </ng-container>

  <ng-container matColumnDef="enabled">
    <th mat-header-cell *matHeaderCellDef> Enabled </th> …

我正在使用Angular Material,并且这个表单有一个自动完成字段,我正在md-autocomplete使用它

<input type = "text" />

在内部渲染文本字段.我遇到了这个问题.每当文本长于字段的宽度时,我希望它包装,以便它不被截断,并显示在下一行中.

但是<input>没有办法设置样式,以便在下一行显示溢出文本(我知道textarea符合我的要求,但md-autocomplete使用input).

所以问题是如何在没有截断的情况下显示文本.任何建议都可以.请帮忙!

我正在尝试使用角度材料2在我的网站上显示图标,但我有点困惑.

这是它应该如何工作,从材料2的github repo中的演示:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

我一直在尝试使用它,但根本没有显示任何图标.

我就是这样设置的:

app.component.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  viewProviders: [MdIconRegistry],
  directives: [MdIcon],
})
export class MyComponent{
  constructor(private router: Router,
              private JwtService:JwtService,
              mdIconRegistry: MdIconRegistry){
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')
  }
}

和模板..

<md-icon>home</md-icon>

页面加载时没有错误,但没有显示图标.什么可能出错？

是否可以在步进器内重置(或只是跳到第一步)？文档中没有记录,但是可以这样做吗？在文档中声明步进器是建立在"CDK Stepper"(链接？)上的,但我找不到任何能够引导我实现目标的例子.

我有一个角元素

<mat-checkbox class="btn-block" 
              labelPosition="before" 
              (change)="showOptions($event)" 
              (click)="makeJSON($event.checked,i,j,k)">
</mat-checkbox>

这里onchange(实际上给出了checkout的状态)正在做一些其他的任务,我想要点击事件的复选框状态(选中或取消选中).

我已经尝试查看由click创建的对象,并且里面没有click对象,所以我如何检测是否选中了复选框.