标签: angular-material-5

我一直在寻找垫表中列上的过滤器的任何示例，但到目前为止还没有找到任何示例。我确实提供了一些有关方法的零碎信息，filterPredicate但没有确切地了解如何处理它。

我的需要是，单个列应该有一个过滤器，例如文本框或复选框，dataSource将根据其进行过滤。

斯塔克闪电战

我有一个垫片，里面有内容。我里面还有一个取消图标。我将 mat-chip 设置为固定宽度，因此我希望取消图标始终向右浮动。但是取消图标并未向右浮动。我尝试了多种 CSS 技术，但没有任何效果。

<mat-chip *ngIf= "item?.name">
   {{ item.name}}
   <mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>

我正在用Typescript学习Angular 5.我正在尝试实现一个角度材料自动完成,我发现以下代码对我来说非常困难:

this.filteredStates = this.stateCtrl.valueChanges
  .pipe(
    startWith(''),
    map(state => state ? this.filterStates(state) : this.states.slice())
  );

完整的代码可以在这里找到:https://stackblitz.com/angular/mdokmnyajmd？file = app%2Fautocomplete-overview-example.ts

我倾向于认为当stateCtrl发生更改时,当且仅当在自动完成中选择了具体元素时,它才返回filterStates(state)结果.

我不明白的是使用startWith('')？为什么不在valueChanges上简化调用订阅？

使用 Ajax 从后端获取值后，排序和分页不起作用。

我正在使用以下版本：

角度：5.2.7 材料：5.2.4 打字稿：2.5.3

我的代码片段：

<div class="form-created-by-me-header">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    </div>

    <div class="form-created-by-me-container mat-elevation-z8">

        <mat-table [dataSource]="dataSource" matSort>

            <!-- ID Column -->
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
            </ng-container>

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

        <mat-paginator [pageSizeOptions]="[1, 5, 10, 25, 100]"></mat-paginator>

    export class FormCreatedByMeComponent {

      cratedFormsByMe: Array<SurveyForm>;
      dataSource: MatTableDataSource<SurveyForm> …

我有一个 Angular 5 应用程序，它必须mat-select在 Bootstrap 模态中使用 Angular Material 。问题是下拉选项出现在模态后面。我的代码如下所示：

<mat-form-field class="mdb-form-field form-adjustments">
    <mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType">
        <mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }}
        </mat-option>
    </mat-select>
</mat-form-field>

我知道我应该使用z-index将 Angular Material 的选择选项带到前面。但问题是上什么课？我尝试将其应用于 Angular Material 的多个类，但无济于事。以下所有方法都失败了：

body div.cdk-overlay-container {
  z-index: 99999;
}

/deep/ .cdk-overlay-pane {
  z-index: 99999 !important;
}

/deep/ .cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 99999 !important;
}

.mat-select-menu-container {
  z-index: 99999 !important;
}

.mat-dialog-container {
  z-index: 99999;
}

/deep/ .mat-select-panel {
  z-index: 99999 …

我正在使用带有复选框的Angular Material6 Tree 组件。

在原始示例中，我们只能向父节点添加新的子节点。如果我想向叶节点添加一个新子节点怎么办？

我正在更改垫输入中的一些样式。我得到了所有这些，但输入中占位符的位置除外。

<mat-form-field>
   <input matInput type="email" name="email" [required]="true" placeholder="email" class="my-class"/>
</mat-form-field>

.my-class {
  padding: 10px;
  box-sizing: border-box;
}

当输入中存在电子邮件时，此方法可以正常工作，但是当它为空时，占位符“电子邮件”会在输入中移动并位于顶角。

通过检查css，我发现在 mat-form-field 中添加和删除了一个类，它是“mat-form-field-sould-float”，我的选择器将类似于：

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder

但我无法让它发挥作用。

我怎样才能改变它？

我正在使用 Angular 5 的材料组件，并且有一个表单控件，它是由服务调用提供支持的自动完成功能。不幸的是，在服务调用完成之前，自动完成不会显示，并且由于我们目前遇到的一些网络延迟问题，大多数用户在服务调用完成之前完成了输入。我想显示某种自动完成正在加载的视觉指示器，但无法弄清楚如何去做。

我们尝试的廉价解决方案是使用工作“加载”填充自动完成菜单，但这需要调整我们的过滤，以便在有人开始输入不以 l 开头的值时它不会立即被压缩。

这是其中一个字段的 HTML 基础知识：

<mat-form-field [hideRequiredMarker]="true">
    <input matInput [(ngModel)]="size" type="text" 
             placeholder="{{'OPTIONS.SIZE' | translate}}"
             [matAutocomplete]="autoSize"
             readonly="{{!model}}"
             (keyup)="filterSizes()"
             matTooltip="{{ 'OPTIONS.MODEL_REQUIRED' | translate }}" 
             [matTooltipDisabled]="model != ''" />

    <mat-autocomplete #autoSize="matAutocomplete">
       <mat-option *ngFor="let completeSize of filteredSizeNames" [value]="completeSize">
          {{completeSize}}
       </mat-option>
    </mat-autocomplete>
</mat-form-field>

服务调用完成后会填充filteredSizeNames 变量。我浏览了材料组件页面，但运气不佳，找到了解决方案。

我正在尝试添加多个表单字段，我想连续添加 2 个表单字段，但我无法在表单字段之间添加空格（无法分隔下划线）

 <li>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

Stackblitz：https://stackblitz.com/edit/angular-rqczqy

我想在“你叫什么名字”和“你好”之间留有空格

我怎样才能实现这个目标？任何帮助将不胜感激！

我有一个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在用户未单击的情况下关闭？