标签: angular-material2

我有一个带有Angular 2的ngx-datatable,它有一些非常长的列名.我想复制他们使用Auto Height for row(链接到文档)所做的事情,但是只会让真正很长的名字换成多行.

通常情况下这不是问题,但是我对Angular的新见感被卡住了.正常的事情,如溢出包装或自动换行似乎不起作用.任何帮助和/或建议将不胜感激.谢谢!

我目前的代码:

  <div class="full-width">
    <ngx-datatable
      class='material'
      [rows]='rows'
      [columns]="columns"
      [columnMode]="'standard'"
      [headerHeight]="150"
      [footerHeight]="50"
      [scrollbarH]="true"
      [rowHeight]="'auto'"
      >
    </ngx-datatable>
  </div>

我试图设置md-selectangular-material2 的默认选项,但无济于事.

form2.component.ts:

export class Form2Component implements OnInit {
    frequency = [
                {"title" : "One Time",         "description" : "", "discount" : {"value" : 0,  "type" : "value"} },
                {"title" : "Weekly",           "description" : "", "discount" : {"value" : 20, "type" : "percent"} },
                {"title" : "Every other Week", "description" : "", "discount" : {"value" : 15, "type" : "percent"} },
                {"title" : "Monthly",          "description" : "", "discount" : {"value" : 10, "type" : "percent"} }
            ]
    constructor(){}
    ngOnInit(){} …

我正在使用材质角度选择组件.当我点击选择器时我可以看到图标,但问题是当我选择一个选项时它只显示值而不是图标.

目前代码正在重写<md-option>删除<img>标记并添加{{bodyStyle.viewValue}}

app.component.html

<div class="form-control form-control--center">                 
 <md-select [(ngModel)]="selectedBodystyle" floatPlaceholder="never" name="bodyStyle">
    <md-option *ngFor="let bodyStyle of bodyStyles" [value]="bodyStyle.value">
        <img src="{{bodyStyle.icon}}" alt="{{bodyStyle.viewValue}}">
            {{bodyStyle.viewValue}}

    </md-option>
 </md-select>
</div>

app.component.ts

  selectedBodystyle: string;
  bodyStyles = [
    { value: 'Mercedez' , viewValue: 'Mercedez', icon: "http://lorempixel.com/50/50/transport/" },
    { value: 'Ferrari'  , viewValue: 'Ferrari' , icon: "http://lorempixel.com/50/50/transport/" },
    { value: 'BMW'      , viewValue: 'BMW'     , icon: "http://lorempixel.com/50/50/transport/" }
  ];

更新

我试图在viewValue属性中添加图像

{ value: 'Ferrari'  , viewValue: '<img src="http://lorempixel.com/50/50/transport/" alt="Ferrari">Ferrari' }

但它以纯文本加载html,在选中后不会显示图像 …

在Angular-4中,我正在设置进度微调器

 <md-progress-spinner [color]="color" [mode]="mode" [value]="value" aria-label="Rating">Rating</md-progress-spinner>

和ts中的值:

  color = 'warn';
  mode = 'determinate';
  value = 50;
  showText='Rating';

但是我想在进度条中设置一些文本,我尝试使用angular-2方法但是它在Angular-4中不起作用可以请任何人告诉我它是如何在Angular-4中完成的

Angular-2方法是设置 [showText]='showText'

我正在尝试使用Angular Material Table创建一个表,在示例中总是有导入:

import {MatTableDataSource} from '@angular/material';

我正在尝试做同样的事情,但我收到一个错误:"模块' ../node_modules/@angular/material/material '没有导出的成员MatTableDataSource.

有什么我想念的吗？

这是package.json版本:

"dependencies": {
 "@angular/animations": "^4.4.6",
 "@angular/cdk": "^2.0.0-beta.12",
 "@angular/common": "^4.2.4",
 "@angular/compiler": "^4.2.4",
 "@angular/core": "^4.2.4",
 "@angular/forms": "^4.2.4",
 "@angular/http": "^4.2.4",
 "@angular/material": "^2.0.0-beta.12",
 "@angular/platform-browser": "^4.2.4",
 "@angular/platform-browser-dynamic": "^4.2.4",
 "@angular/router": "^4.2.4",
 "bootstrap": "^3.3.7",
 "core-js": "^2.4.1",
 "pdfmake": "^0.1.33",
 "rxjs": "^5.4.2",
 "zone.js": "^0.8.14"
},
"devDependencies": {
 "@angular/cli": "1.4.9",
 "@angular/compiler-cli": "^4.2.4",
 "@angular/language-service": "^4.2.4",
 "@types/jasmine": "~2.5.53",
 "@types/jasminewd2": "~2.0.2",
 "@types/node": "~6.0.60",
 "codelyzer": "~3.2.0",
 "jasmine-core": "~2.6.2",
 "jasmine-spec-reporter": "~4.1.0",
 "karma": "~1.7.0",
 "karma-chrome-launcher": "~2.1.1",
 "karma-cli": "~1.0.1",
 "karma-coverage-istanbul-reporter": …

我成功地使菜单出现了mouseenter.我现在要做的是让它mouseleave在菜单本身的事件中消失.有关如何实现这一目标的任何想法？

    <button mat-button [mat-menu-trigger-for]="menu" 
     #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
        TRIGGER BUTTON
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false" 
     (mouseleave)="menuTrigger.closeMenu()">
         <button mat-menu-item [routerLink]="['sources']">
              <mat-icon>view_headline</mat-icon>
              MENU CHOICE
        </button>
    </mat-menu>

我使用材料2创建了Snackbar(下面我添加了演示).当我点击该按钮时,我在主页面中有一个按钮,它在页面底部显示消息(小吃栏).我想将此(小吃栏消息)更改为页面的右上角.我怎样才能做到这一点 ？？需要帮忙

演示

HTML

<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

component.ts

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,

        });
  }
}

我有一个示例：https : //stackblitz.com/edit/stackoverflow-49230894 ...这是一个问题：当我用手展开项目时，“全部折叠”将不起作用（当我“全部展开”时，效果相同”，然后手动折叠项目，“全部展开”按钮将无法使用）。有任何解决办法吗？

我有一个数据表，我正在尝试分配<a>一个参与者名称<td>，该名称将在单击新组件时将用户带入。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let Participant"> <a routerlink="/participants/userId">{{Participant.name}}</a> </td>
</ng-container>

它没有显示错误或其他任何内容，但是，它没有使<td>clickable可用，它完全忽略了routerLink，如果我将分配href给<a>它的话。

我正在使用Angular客户端应用程序，并且已经在此应用程序中使用了Material的少量功能，例如对话框，选择，卡片等。我想我已经安装了我需要的所有东西。现在我做了一个sidenav，我想使用material的sidenav模块，所以我做到了：

<mat-container>
  <mat-content>
    <div (click)="sidenav.toggle()"></div>
    my component html . . .
  </mat-content>
  <mat-sidenav #sidenav>
    <app-sidenav></app-sidenav>
  </mat-sidenav>
</mat-container>

现在，当我导航到该组件时，我得到一个错误：

未捕获（承诺）：TypeError：无法读取未定义的属性“ runOutsideAngular”

如果没有该组件，该组件就可以正常工作……有人知道这可能是什么问题吗？谢谢！