标签: angular-material2

我有一个数据集，正在角度材料表中显示（使用角度 6）。已按照此文档链接执行此操作。我一直在寻找一种优化/简洁的方法来将行表示为列，将列表示为行

这是我的html：

<table mat-table [dataSource]="subscriptionPlans" class="mat-elevation-z8 subscription-table text-left">
    <ng-container matColumnDef="subscription">
      <th mat-header-cell *matHeaderCellDef> Subscription </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="rows">
      <th mat-header-cell *matHeaderCellDef> Rows in million </th>
      <td mat-cell *matCellDef="let element"> {{(element.rowsInMillion) ? element.rowsInMillion : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> Pricing </th>
      <td mat-cell *matCellDef="let element"> {{(element.price) ? element.price : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="additionalPricing">
      <th mat-header-cell *matHeaderCellDef> Pricing for additional 1 million rows </th>
      <td mat-cell *matCellDef="let element"> {{(element.extraPerMillion) …

我使用标签导航栏。我的选项卡已正确创建。当我单击一个选项卡时，路线会起作用，并且该选项卡会正确激活。

我的问题是，当我第一次加载网站时，根选项卡具有预期的墨水，但标签未处于活动模式

• 顶部：加载时，标签“home”呈灰色（我的问题）
• 底部：单击选项卡后，标签“home”为全白色（加载时应如此）。
• 注意：两种情况下的路线都是相同的“/home”

成分：

export class NavbarComponent {
  // List of links
  links = [
    {label: 'Home', path:'/home'},
    {label: 'Design', path:'/design'}
  ];

  constructor() { }

模板：

<nav mat-tab-nav-bar
  class="mat-elevation-z4"
  backgroundColor="primary">
  <a *ngFor="let link of links"
    #rla="routerLinkActive"
    mat-tab-link
    routerLinkActive
    [routerLink]="link.path"
    [routerLinkActiveOptions]="{exact: true}"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

我正在尝试在反应式表单中使用材质日期选择器，但由于更改连接到日期选择器的输入值不会更新表单控件的值，因此我遇到了问题。

因此，这会导致各种问题，例如不正确的验证错误，例如尽管已填充输入但仍显示所需的错误，以及表单未分类为有效，这意味着按钮在应该启用时未启用。

组件.html

<form [formGroup]="invoiceForm">

  <mat-form-field appearance="outline" floatLabel="always">

    <mat-label>Date</mat-label>

    <input matInput formControlName="date" [matDatepicker]="selectDate" placeholder="DD/MM/YYYY">

    <mat-datepicker-toggle matSuffix [for]="selectDate"></mat-datepicker-toggle>

    <mat-datepicker #selectDate></mat-datepicker>

    <mat-error *ngIf="form.date.errors.required">Date is required</mat-error>

    <mat-error *ngIf="form.date.errors.validDate">Invalid date</mat-error>

  </mat-form-field>


  <button mat-raised-button (click)="saveInvoice()" [disabled]="!invoiceForm.valid || !items.length">Save</button>

</form>

组件.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable, from } from 'rxjs';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MatDatepickerInputEvent } from '@angular/material';
import * as moment from 'moment';

import { DataService } …

我一直在尝试使用带有反应形式的角形材料的单选按钮，同时使用厕所，但没有成功。我成功地使用了 html 本机单选按钮，但是当我更改为 mat-radio-buttons 时，在为“第二个”控件选择一个值时，它将为第一个控件设置相同的值。

我在这里做错了什么？下面的演示

https://stackblitz.com/edit/angular-68mtq8

我在移动设备上遇到 mat-dilog 问题。在横向移动设备上，垫对话框操作按钮位于屏幕之外，因此无法关闭对话框。

我考虑过使用特殊的 css 类在对话框顶部复制操作按钮，但它需要手动将其添加到每个对话框中。

// Dialog close button for mobile devices    
.dialog-close-btn {
  visibility: hidden;
}

@media screen and (max-width: 799px) and (orientation: landscape) {
  .dialog-close-btn {
    visibility: visible;
  }
}

它有效，但就像我说的那样，这是大量重复的代码和不必要的工作。也许有人遇到过这个问题并且有更简单的解决方案。顺便说一句，我还注意到在 chrome 全屏模式下没有这个问题，也许可以在全屏模式下在移动设备上打开对话框？如果有任何建议，我们将不胜感激）。

我有一个有角度的材料树，它应该在树内的树节点内有过滤器（第三级）。当我单击子项时，过滤器应该与孙子项一起出现。我看到下面的示例，其中过滤树外部并过滤整个节点：

https://stackblitz.com/edit/angular-yb37gh?file=app%2Ftree-checklist-example.html

如果我们看上面的例子，我需要在伊斯坦布尔下进行过滤，并且它应该提供过滤下面的子元素的功能。我的意思是在孙子级别上进行过滤，并且应该能够仅过滤孙子

我尝试过一个示例，其中当 I.filter 孙子时，它将重新渲染树，并且由于树本身内部的过滤器，过滤器也会重新渲染，因此我无法保留过滤器上的值。

有人遇到过在树内添加过滤器吗？请帮忙

我期待像下面这样的东西。仅搜索该级别上的所有节点。

                <input
                  [value]="question.timestampToMoment(row.controls[column.name].value)"
                  [formControlName]="column.name"
                  [required]="column.required"
                  matInput
                  [matDatepicker]="picker"
                  (dateChange)="question.onDateChange($event)"
                  placeholder="Choose a date"
                />

我希望FormControl附加到此的datepicker时间戳作为值，以便时间戳可以发送回后端。然后，当值从后端返回时设置此值datepicker时，我需要将其moment从时间戳转换回对象。

我想象timestampToMoment会是这样的：return moment(value * 1000)

但我不知道如何实施onDateChange或任何其他方式来完成这项工作。用途.datepicker​moment.js

我正在尝试在 Angular 材质嵌套树上实现拖放。树本身和拖放逻辑运行良好。
问题是我无法定位正确的节点以将拖动的元素放入其中
例如我有这样的结构：

如果我尝试更改元素的位置，例如 Child1 从 Group2 并将其移动到 Group1，它将无法正常工作

=>

如您所见，Child1 现在与 Group1 和 Group2 处于同一级别。我想再次提及 drop() 函数工作正常，因为它返回正确的索引。它只是根据它收到的索引更改数组中的元素位置，这意味着它从开头得到错误的索引

所以问题应该出在标记或CSS中。
我花了很多时间试图理解这个问题。希望你能帮助我。

这是我的材料树的简化代码：

        <mat-tree [dataSource]="DataSource" [treeControl]="TreeControl" cdkDropList
            (cdkDropListDropped)="drop($event)">
            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild" cdkDrag [cdkDragData]="node">
                <li>
                    <div>
                        <div fxLayout="row" fxLayoutAlign="start center"
                            [class.bg-primary]="selected && node.id === selected.id">
                            <button mat-icon-button matTreeNodeToggle [disabled]="node.isEmpty">
                                <mat-icon insert="true">
                                    {{TreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                </mat-icon>
                            </button>
                        </div>
                    </div>
                    <ul [class.primary]="selected && node.id === selected.id"
                        [class.tree-invisible]="!TreeControl.isExpanded(node) ">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </ul>
                </li>
            </mat-nested-tree-node>
            <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle cdkDrag [cdkDragData]="node"> …

使用cdkScrollable我遇到了错误或我的理解问题：

我已经实现了一个，并且正在 -Method中DataSource订阅 collectionViewer 的事件。正如本例中所做的那样。viewChangeconnect

现在在我的代码中，该viewChange事件永远不会被触发 - 因此数据源永远不会加载。我需要 viewChange 事件，因为只有这个事件才能告诉我range应该加载哪个（或页面）数据。

经过对 github 的一些研究，我发现，在_updateRenderedRange（代码）中，它检查我的数据源返回的数组的长度（当我等待事件触发时，它还没有返回任何内容）。

该示例之所以有效，是因为它初始化了一个长度为 100000 的数组。我不明白 和dataLength滚动策略之间的联系。在我看来，结果数据数组的大小在计算范围时应该没有区别...我认为范围是通过可滚动元素的大小和渲染项目的大小来计算的。也许还有一个参数告诉视口总共有多少个项目，以便它可以绘制正确的滚动条（就像数据表中的分页器知道有多少页）。但为此，您不需要初始化包含那么多项目的数组。

我在这里缺少什么？

我有一个自动完成组件。

我传递了一个对象数组。

我希望当我选择一个选项时我会得到所有项目信息 ( option) 而不仅仅是字段值 ( option.name)

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectOption($event.option)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

组件ts

export class SearchLeagueComponent implements OnInit {
  constructor(private searchLeagueService: SearchLeagueService) { }
  myControl = new FormControl();
  options: ILeague[] = [
    {
      _id: '',
      teams: [],
      name: '',
      sport: ''
    }
  ];
  filteredOptions: Observable<ILeague[]> | undefined

  ngOnInit() {
    this.searchLeagueService.getLeaguesList().toPromise().then(data => this.options = …