标签: angular-material-6

我是 Angular 和 Angular Material 的新手，

没有 Angular Materail 它工作正常

<table>
  <tr>
    <th>City</th>  
    <th>State</th>
  </tr>

  <tr>
      <td>{{ varEmp?.address.city}}</td>
      <td>{{ varEmp?.address.state}}</td>

    </tr>

</table>

对于角度材质，它不起作用

<table mat-table [dataSource]="varEmp" class="mat-elevation-z8">


  <!-- Position Column -->
  <ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef> City</th>
    <td mat-cell *matCellDef="let element"> {{element?.address.city}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="state">
    <th mat-header-cell *matHeaderCellDef> State</th>
    <td mat-cell *matCellDef="let element"> {{element?.address.state}} </td>
  </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

在组件中我声明了变量

displayedColumns: string[] = ['city','state'];

简要描述组件代码以降低复杂性

Json对象

{"address":
   {"city": …

我们可以同时使用角材料和自举来进行角工程吗？我应该知道些什么吗？

我尝试在我的角度应用程序中使用两个具有不同数据的手风琴组，例如我在下面提到的代码，但我不知道如何在我的应用程序中使用两个相同的组件。

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

@Component({
  selector: 'app-demo-accordion',
  templateUrl: './demo-accordion.component.html',
  styleUrls: ['./demo-accordion.component.css']
})
export class DemoAccordionComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @ViewChild(MatAccordion) accordion: MatAccordion;
  @ViewChild(MatAccordion) testing: MatAccordion;
  displayMode: string = 'default';
  displayMode1: string = 'default';
  multi = true;
  hideToggle = false;
  hideToggle1 = false;
  disabled = false;
  showPanel3 = true;
  panel11 = false;
  expandedHeight: string;
  collapsedHeight: string;
}

<h1>matAccordion</h1>
<div>
  <p>Accordion Options</p>
  <p>Accordion …

我正在包装角度材质菜单组件。我正在扩展 MatMenuTrigger、MatMenuItem，将它们作为单独的指令并在父组件中使用它。在子组件（菜单组件）中，我仅使用 mat-menu 来获取引用，在父组件（菜单演示组件）中，将菜单（位于子组件中）附加到我们想要的任何控件。我不应该在子组件内使用按钮标签，所以我使用 ng-content 从父组件获取内容。我只想公开一些属性来获取该引用。我的问题是如何包装这个参考菜单stackblitzlink。请帮我解决这个问题，提前致谢。

我需要将mat-table组件的Header固定在顶部，但这不起作用。

我有Angular v6.1.7和@ angular / material v6.4.7。

我在matHeaderRowDef上添加了“ sticky：true”属性，就像有人在这里提到的那样，但是它什么也没做:(

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

我有这个示例项目：https : //stackblitz.com/edit/angular-wem2qa

这是我在TS文件上的导入：

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { MatDialog, MatExpansionPanel, MatSnackBar, MatSort, MatTableDataSource, Sort } from "@angular/material";

我正在尝试使用多个复选框来自定​​义Mat-select。由于某些原因，面板的最小宽度错误，如下所示：

而且我不知道它的最小宽度在哪里计算。我也尝试添加panelClass并重写此类的最小宽度，例如：

<mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple>      

&.multiple-panel {
   min-width: 200px !important;
}

但是，当打开下拉菜单时，其打开的宽度为原始宽度（如图所示），并在几毫秒后“跳转”到面板类上定义的自定义最小宽度。

我发现很难选择垫子样式。有人知道如何解决这个问题吗？

我有一个mat-menu包含多个复选框的应用程序，我希望用户在检查所需的所有类型的过滤器时将其关闭。

实际的行为是当您单击任何内容时，它将自动关闭。

我有以下代码：

<button color="warn" mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-checkbox color="warn">
      By LM
    </mat-checkbox>&nbsp;
  </button>
  <button mat-menu-item>
    <mat-checkbox color="warn">
      By UN
    </mat-checkbox>&nbsp;
  </button>
</mat-menu>

我在堆栈溢出时检查了此帖子，但该事件未起作用。

他们从文档中说：

@Output（）关闭：EventEmitter

菜单关闭时发出的事件。

但是我无法弄清楚如何使用此输出，以及它是否与我需要的输出有关。

这是一堆堆炸弹。

如何防止mat-menu在用户未单击的情况下关闭？

我通过http请求检索数据，文本被预先格式化为 HTML 文本，而且大部分时间都很长。基本上我使用以下内容：

<h2 matDialogTitle> My title</h2>
<mat-dialog-content>
  <p [innerHTML]="data.displayText" ></p>
</mat-dialog-content>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close color="primary">Close</button>
</div>

对话框的内容总是向下滚动 - 接近结尾。如何防止此功能并从一开始就显示内容？

设想 ：

• 我正在使用角材料选项卡，每个不同的选项卡都有各自的动态组件。

• 因此，当我切换选项卡时，它会从 DOM 中删除内容。当我再次返回该选项卡时，它会再次加载内容。

问题：
我只想将内容更改为display:none;而不是从 DOM 中删除它，而不是默认行为。

我正在处理的场景是 -> 在 mat datepicker 上选择日期时，我想进行一次 http 调用，执行一些计算 尝试使用 (selectedChanged) 执行此操作，但似乎不起作用，需要有关我如何操作的帮助可以解决这个问题，在此先感谢以下是我尝试执行此操作的 HTML 代码

    <div class="form-group m-form__group row">
    <div class="col-lg-4 m-form__group-sub">
    <mat-form-field class="example-full-width" appearance="outline">
    <mat-label>Policy Start Date</mat-label>
    <input matInput [min]="minDate" [max]="maxDate
    [matDatepicker]="picker4"
    placeholder="Choose a date" formControlName="policy_start_date" >
    <mat-datepicker-toggle matSuffix [for]="picker4" >
    </mat-datepicker-toggle>
  <mat-datepicker #picker4 (selectedChanged)="currentPeriodClicked()">
</mat-datepicker>
                                                </mat-form-field>
                                            </div>