标签: angular-material

我想为多个值过滤 Angular Material 表中的一列。

我为此添加了两个过滤器。位置的下拉过滤器，带有对应于每个位置的复选框和基于文本的名称过滤器。我希望过滤器以这样的方式工作，如果我单击位置下拉列表中 1 和 10 的复选框，两行都可见。但是，如果我在选中这两个复选框时在名称过滤器中写入 H，则只有第 1 行可见。基本上，一列的多个过滤器中的 OR 和不同列的过滤器之间的 AND。

现在，我的代码适用于两个单独过滤器之间的 AND 部分。但是，如果我在位置下拉菜单中选择两个复选框，则两列都不可见。

在 Stackblitz 上附上我的代码以供参考

有没有办法让我的垫子扩展面板只有在我点击某个按钮时才能打开？

我正在考虑有一个信息列表，我可以在上面单击编辑图标，这会导致展开显示编辑选项......

当然，我不希望面板在行上随机单击时扩展，而只在编辑图标上...

我正在构建一个带有 angular 7 和 angular material 的电子应用程序

我有一个 Stepper，它的第二步调用电子 main 以使用户选择一个文件夹来保存应用程序的内容。当它被选中时，它会调用“selectedWorkingFolder”，这会将步骤设置为已完成，并且应该直接使用 (this.stepper.next()) 转到步骤 3，除非我单击窗口上的任意位置，否则这不起作用。

这是一个显示它的gif

https://i.gyazo.com/7e17510822bc7b3946bc6e917e965466.mp4

这是控制器代码

import { Component, OnInit, Input, ChangeDetectorRef, ViewChild } from '@angular/core';
import { ElectronService } from 'src/app/services/electron/electron.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.css']
})

export class MainComponent implements OnInit {

    @ViewChild('stepper') stepper;

    firstFormGroup: FormGroup;
    secondFormGroup: FormGroup;

    isLinear = true;

    constructor(
        private readonly ipcServ: ElectronService,
        private cdRef: ChangeDetectorRef,
        private _formBuilder: FormBuilder,
    ) { …

我有一个由这种垂直结构组成的应用程序：导航栏、搜索部分和带有结果的表格。这些树元素中的每一个都占用了所需的空间，而无需使用固定大小。更多的搜索部分有隐藏的子部分，所以它的大小可以随着时间的推移而改变。

我想要做的是：我希望这三个部分独立调整它们的高度以占据所有可用空间。但是因为我可以在表格上有很多结果，所以最终需要一个垂直滚动条。所以我想看到的唯一滚动条是在表格的结果部分。

如果我设置

溢出：自动

在全局 CSS 上，如果表格有太多结果，我会看到一个全局滚动条。

如何强制表格使用屏幕上的剩余空间并在需要时显示滚动条？

我使用了 Angular 的材质对话框，我需要在其中输入标题并选择批准或拒绝变体。

这里的组件代码

  import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";
import { Payment } from '../payments/payment';


@Component({
    selector: 'editing-dialog',
    templateUrl: './editing-dialog.component.html',
    styleUrls: ['./editing-dialog.component.scss']
})
export class EditingDialogComponent implements OnInit {
    form: FormGroup;
    reason:String;
    id: Number;
    statusdescription: String;

    constructor(
        fb: FormBuilder,
        private dialogRef: MatDialogRef<EditingDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data:Payment) {
            this.reason = data.Reason;
            this.id  = data.Id;
            this.statusdescription = data.StatusDescription;
            this.form = fb.group({
                reason: [this.reason, Validators.maxLength(5)],
                id: this.id,
                status: status
            });
    }

    ngOnInit() { …

我找到了如何自定义材质切换按钮的精彩链接。我成功设置background-color和font-weight我想的方式

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

.mat-button-toggle-checked {
    background-color: mat-color($primary);
    font-weight: bold;
    color:mat-color($primary); // <=== does not work!!!
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

但不知何故，字体本身保持黑色 - 这不是使用color="primary".

知道如何包括fore-color- 正确吗？

我已将 Angular 版本从 5.2 升级到 7.2.0，并使用以下版本的软件包：

“ @angular/flex-layout ”：“ ^7.0.0-beta.22 ”，打字稿版本：3.2.2，“ @angular/cdk ”：7.2.1，“ @angular/cli：7.1.4 ”

我收到构建错误：

“MediaQueryListEvent”不可分配为 MediaQueryList 类型。

代码：

export class LayoutComponent implements OnInit, OnDestroy {

  private _router: Subscription;

  mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  url: string;
  sidePanelOpened;

  constructor (
    private _element: ElementRef,
    private router: Router) {
    this.mediaMatcher.addListener(mql => zone.run(() => {
      this.mediaMatcher = mql; //i am getting error here Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
                  //Property 'onchange' is missing …

我正在设置一个 Web 应用程序，我想实现具有响应性的移动版本。

我使用的是 Angular 7 和 Angular 材质 7.2。

<mat-grid-list cols="12">
  <mat-grid-tile  [colspan]="6">

    <h1 class="title">Title</h1>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h2 class="date">Date</h2>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h1 class="price">price€</h1>

  </mat-grid-tile>
</mat-grid-list>

我有一个包含 3 个图块的 12 个列的网格列表：

A- 6 (6/12)

B- 3 (3/12)

C- 3 (3/12)

网络

<-------- 12 -------->

AAAAAA BBB CCC

当我得到我想要的手机尺寸时：一个包含 3 个图块的 12 列网格列表：

A- 12 (12/12)

B- 6 (6/12)

C- 6 (6/12)

移动的

<-------- 12 -------->

AAAAAAAAAAAA

BBBBBB-中交

对不起我的英语 ;) 谢谢

我目前正在尝试实现以下行为的更复杂版本，但由于我要到星期一才能访问我的项目，因此我将使用 Angular Material 教程中的更改示例进行简化。

Angular Material 表中填充了来自字符串数组的数据。数据显示在第一列的输入字段中。每行的第二列是一组按钮，当按下这些按钮时，会更改其行输入的内容。

我试图通过使用模板引用变量来识别输入元素，但它总是显示为未定义。所以我假设 Angular Material 的表在我背后做一些改变所述变量范围的事情。

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

    <ng-container matColumnDef="inputColumn">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element">
            <input #inputRef placeholder="{{element.name}}">
        </td>
    </ng-container>

    <ng-container matColumnDef="buttonColumn">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
            <button (click)="inputRef.value='Changed Element'">Change!</button>
        </td>
    </ng-container>

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

在我的实际项目中，数据将来自 API，还会有更多按钮用于启用输入、保存或放弃对其内容所做的更改等。但是如果我设法让这个例子工作，那么剩下的应该很简单。

任何帮助将不胜感激。

我想创建一个 Angular Material stepper，但我想使用 mat-icons 而不是气泡内的数字，我应该怎么做？