标签: angular-material-5

有谁知道更新 ngOnChanges 生命周期挂钩中的 mat 表数据源是否可以？或者是否存在潜在的数据泄漏或大规模性能问题？

这是我的意思的一个简单示例。

子组件有一个输入数据的父组件，如下所示：

<data-list [data]="someData"></data-list>

和子组件：

import { Component, Input, SimpleChanges, OnInit, OnChanges } from '@angular/core';
import { MatTableDataSource } from '@angular/material';


@Component({
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss']
})
export class DataListComponent implements OnInit, OnChanges {
  @Input() data: any[];

  dataSource: MatTableDataSource<any>;
  displayedColumns = [
    'title',
    'detail'
  ];

  constructor() { }

  ngOnInit() {
    this.dataSource = new MatTableDataSource<any>(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    this.dataSource = new MatTableDataSource<any>(changes.data.currentValue);
  }

}

现在父组件订阅了不同的 observables，它们对数据的不同变化做出反应。也就是说，如果添加或删除数据，则父组件会相应地更新，并将其作为输入传递给子组件。

由于子组件使用 ngOnChanges 生命周期钩子来观察输入数据的变化，子组件通过实例化一个新的 MatTableDataSource 来更新表数据。

一切正常。除了 ngOnChanges …

使用适当的Angular Material指令,如何将方向更改为垂直？

从垂直标签开始:

然后想要放到mat-select下拉列表下面的内容:

编辑:如果有人不打扰我,我将努力使/sf/answers/3037231291/适应我的答案:)

有没有办法使用 CSS 制作具有粘性第一列的 Angular Material？

这里准备编辑Stackblitz代码

我尝试调整此解决方案https://jsfiddle.net/zinoui/BmLpV/，但由于某些原因，第一列被抛出表格本身，并且失去了样式。

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>..........
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
.......
                <tr>
            </tbody>
        </table>
    </div>
</div>


.zui-scroller {
    margin-left: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}

我使用一个mat-form-field有textarea内部的常规。我的问题是此 Textarea 的占位符文本相当长。在移动设备中，空间更加有限，此占位符文本会被带有省略号的 Angular Material 截断。

我想让占位符文本通过向下移动到下一行来调整空间限制。因此，例如，而不是：

This is a really long text and it cannot fit on a single li...

我想：

This is a really long text and it cannot fit on a single
line

我已经尝试了各种方法来更改mat-input-placeholderand的 CSS，但mat-input-placeholder-wrapper没有成功。我知道解决方案的一部分涉及更改 text-overflow 属性（如下），但我无法获得其他部分。

::ng-deep .mat-input-placeholder {
  text-overflow: clip;
}

任何人都可以帮忙吗？

谢谢！

您如何使底部工作表组件像卡片一样出现在视图中，而不仅仅是出现在屏幕底部？使用版本 6.0.1。

从文档（https://material.angular.io/components/bottom-sheet/api）中，在选项中指定 viewContainerRef 应该会产生一些效果，但在示例中没有任何反应。

演示链接：https : //stackblitz.com/edit/angular-kfpaa2?file= app/ bottom-sheet-overview-example.ts

我对Angular 5并不陌生，并且刚刚开始学习它。

最近，我一直在尝试使用Angular 5 Material为我的应用程序创建一个包含多个菜单的菜单栏。
鼠标进入时将触发/打开菜单，鼠标离开菜单时将关闭菜单。
我的问题是每当鼠标悬停在第一个菜单上时，它将加载第二个菜单的菜单项。

这是问题的屏幕截图：


这是我的代码：
mainmenu.component.html：

<div>
    <button mat-button [matMenuTriggerFor]="menu1" 
      (mouseenter)="openMyMenu()">Trigger1</button>
    <mat-menu #menu1="matMenu" overlapTrigger="false">
        <span (mouseleave)="closeMyMenu()">
            <button mat-menu-item>Item 1</button>
            <button mat-menu-item>Item 2</button>
        </span>
   </mat-menu>
</div>
<div>
    <button mat-button [matMenuTriggerFor]="menu2"
      (mouseenter)="openMyMenu()">Trigger2</button>
    <mat-menu #menu2="matMenu" overlapTrigger="false">
        <span (mouseleave)="closeMyMenu()">
            <button mat-menu-item>Item 3</button>
            <button mat-menu-item>Item 4</button>
        </span>
    </mat-menu>
</div>

mainmenu.component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatMenuTrigger} from '@angular/material'

@Component({
  selector: 'app-mainmenu',
  templateUrl: './mainmenu.component.html',
  styleUrls: ['./mainmenu.component.css']
})
export class MainmenuComponent implements OnInit {
  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger; …

实际上，我使用了角形材料扩展面板（手风琴）来进行面板扩展。所以我尝试过的是我只想在一个父扩展面板中显示子面板，如下所示。见下图。

数据库将成为顶级父面板，其中我有不同的数据库作为子面板。为此，我编写了这样的代码。但代码不起作用意味着当我单击子面板内的任何父面板时，所有内容都会折叠。我的意思是说面板正在倒塌。参见下面的代码：

<mat-accordion>

        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Databases
              </mat-panel-title>
              </mat-expansion-panel-header>


              <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      MySQL
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>


                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        Oracle
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>

                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState …

我有一个包含对象name和id属性的列表：

[
  {
    "name": "open",
    "id": "1"
  },
  {
    "name": "inprogress",
    "id": "2"
  },
  {
    "name": "close",
    "id": "3"
  }
]

并使用带有 *ngFor 的 MatSelect 迭代数组并使用 select using 绑定当前状态[(ngModel)]。

预期输出：

如果当前状态是inprogress禁用open选项

StackBlitz 示例

有没有办法在角度材料中主题组件形状？我知道材料设计有一个形状概念，它允许您为所有小/中/大组件创建更多圆角、更少圆角甚至切角。有没有办法在角材料中实现它？

如果不是，那么在角材料中全局自定义组件的最佳方法是什么？说我想删除 all 上的圆角<mat-button>？

我有一个带有fixed header角材料的z-index网站1100。

虽然mat-menu我的网站中有一些与标题重叠z-index:1200并具有类cdk-overlay-container（角度材料类），但这是默认行为。

为了覆盖这个，我只需减少 to ，cdk-overlay-container z-index使其1000落后于fixed header，一切都对我来说没问题。

问题

但是，当我打开使用相同cdk-overlay-container和相同的材质对话框时z-index，它会在该覆盖层上方显示我的固定标题，因为它很高z-index，所以任何想法如何通过添加不同的来实现上述场景，class以便cdk-overlay-container我的内容mat-menu落后于fixed header但我mat-dialog最重要的内容。

屏幕截图

正常场景 https://www.screencast.com/t/XhB2szH3gZe

问题场景 https://www.screencast.com/t/fYrMYFEOd

我有一个通过类型脚本解决方案（当对话框显示较低的标题的 z-index 时），但我需要一些纯 CSS 解决方案。

谢谢！