标签: angular-material2

我有一次mat-table渲染大约 10 行。该表的数据源来自作为对象数组的 API 调用。我想向其中的元素添加一个name属性，或者向其值作为与该行的索引连接的字符串的元素添加一个属性。mat-cellmat-row

我能够分别通过*matCellDef="let i = index"和获取索引*matRowDef="let i = index;"。但是，如果我添加name具有值的属性，name="monitoring{{i}}"那么它不会将该属性添加到该标签/元素。{{i}}但是，如果我从值中删除（这使得它name="monitoring"），那么它将被分配该字符串并且将完美显示，但每行的名称变得相同。

有谁知道如何将动态值分配给 name 属性，以及我在分配中做错了什么，以致它不会出现在动态值分配中？

提前致谢。

PS 这是我正在尝试使用的代码 -

不起作用:(

<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" name="monitoring{{i}}"></mat-row>

作品

<mat-row *matRowDef="let row; columns: displayedColumns;" name="monitoring"></mat-row>

我有多个选项卡视图，每个选项卡视图中都有一个组件呈现。这是代码：

<mat-tab-group>
                    <mat-tab *ngFor="let g of goals; index as i">
                        <ng-template mat-tab-label>{{g.name}}</ng-template>
                        <div class="row">
                            <app-summary [goal]="g"></app-summary>
                        </div>
                        <div class="row">
                            <mat-table #table [dataSource]="dataSource[i]">
                                ## some table content here
                            </mat-table>
                        </div>
                    </mat-tab>
                </mat-tab-group>

看起来像这样app-summary：

<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
    <div fxFlex="55">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="wealthOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex="25">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="pieProbOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

包含<chart>高图表视图。但是，这些图表仅适用于第一个选项卡。component为每个选项卡加载并呈现。

这里是否缺少某些内容或需要以某种方式完成？

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

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

我无法使用 renderer2 禁用角度材质的选择下拉菜单。下面是我的代码

组件.html

            <mat-select #exLoc (selectionChange)="someFun($event)" [(value)]="someVal">
              <mat-option aria-selected="true" [value]="locVal" *ngFor="let location of locations">{{location.LocationName}}
              </mat-option>
            </mat-select>

组件.ts

constructor(public renderer: Renderer2) {} 
@ViewChild('exLoc') exLoc: ElementRef;
functionToDisableDropDown() {
 this.renderer.setAttribute(this.exLoc, 'disabled', 'true');
}

当我单击 mat-dialog 中的关闭按钮时，滚动顶部位置会自动重置并移动到顶部。我使用的是 Angular Material 6.1.0 版本。这只发生在 IE11 中。

我制作了一个 Angular 6 应用程序，其中有一些 MatDialog。这在开发模式下完美运行。

现在我必须将其实现到现有网站（使用 sitecore 9）中。这非常有效，只是对话框无法正确打开。我发现对话框被添加到正文中，而不是添加到我的角度根 DOM 元素中。

<html>
  <head></head>
  <body>
    <app-library>...</app-library>

    <div class="cdk-overlay-container">...</div>
  </body>
</html>

有没有办法将对话框添加到角度应用程序元素（在我的例子中）而不是添加到主体元素？

我已经尝试使用 viewContainerRef 选项 matDialog，但这似乎不起作用：

export class AppComponent implements OnInit {
  constructor(..., public viewRef: ViewContainerRef) {
}

export class FilterToggleComponent implements OnInit {
  constructor(..., public dialog: MatDialog, private appRef: ApplicationRef) {}
  openFilterPanel() {
    const viewRef = (this.appRef.components[0].instance as AppComponent).viewRef;
    const dialogRef = this.dialog.open(FilterPanelComponent, {
      width: '100vw',
      height: '100%',
      panelClass: 'search-filter-panel-modal',
      viewContainerRef: viewRef
    });
  }
}

我有一个按钮可以打开我的材质对话框。在打开的对话框中，后台页面滚动到顶部。关闭对话框时，页面滚动回原始位置。

谁可以阻止这个滚动？

const dialogRef = this.dialog.open(dialogComponent, {
            panelClass: config.panelClass,
            width: 1100px,
            height: 800px,
            closeOnNavigation: true,
            maxHeight: '95%',
            maxWidth: '95%',
            data: {
                someData...
            },
        });

我的网页

<div class="dialog dialog__content">
    <div>
        <div *ngIf="title" class="dialog__header">
            <h1 mat-dialog-title>{{title | translate}}</h1>
        </div>
        <div class="dialog__closing">
            <button matDialogClose>
                <i class="fal fa-times-circle"></i>
            </button>
        </div>
    </div>
    <mat-dialog-content>
        ...some content...
    </mat-dialog-content>

    <mat-dialog-actions *ngIf="buttons && buttons.length > 0">
        <div class="buttons">
            <button>...</button>
        </div>
    </mat-dialog-actions>
</div>

我无法实现芯片选择并向用户表明该芯片已被选择。

我有以下 html 模板代码：

<mat-chip-list [multiple]="true" [selectable]="true">
  <mat-chip selected (selectionChange)="onSelectedChip($event)" [selectable]="true"  *ngFor="let size of sizes | sizeEnumToSize">{{ size }}</mat-chip>
</mat-chip-list>

最初我只是想让所有芯片都处于选定状态。我希望芯片能够直观地改变其状态，以向用户显示它已被选择。我也尝试过做 [selected]="true" 但这会产生与预期相同的正常列表。

我在这里缺少什么？

我正在尝试设置日期选择器打开的默认月份，基于从日历事件中获取的值。EG：您在四月，单击日历上的下个月，当您选择日期选择器时，它会在五月打开

我环顾四周，很多问题都讨论了 DatePicker 而不是 RangeSelector，通常如何解决这个问题（据我所知）是：

//Adding a [Value] Bind to the Input and setting the Value
E.G 
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [value]="getTomorrow()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

mat-date-range-input 没有 [Value] 属性

所以我不确定如何在范围选择器上设置“默认：值”：

<mat-form-field appearance="fill">
  <mat-label>Click the Icon to select a Date</mat-label>
  <mat-date-range-input [formGroup]="range" >
       <input matStartDate formControlName="start" placeholder="Start date">
       <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
       <mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
       <mat-date-range-picker  #dateRangePicker></mat-date-range-picker>
                  
      <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
      <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

日期选择器： 链接

我找到了如何设置普通单一日期选择器的解决方案：

链接2

注意我使用范围选择器，因此我的输入字段与普通基本日期选择器的输入字段不同。所以我无法使用 [Value] Bind …

我正在关注https://material.angular.io/components上给出的示例,并尝试将"X"数量的卡放在同一"行"中.为了实现这一点,我在md-grid-tile中嵌套了一张md-card.

以下是我正在做的事情的一个问题https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

如果弄清楚md-grid-tile有一个溢出:隐藏的css规则,如果我把它改成溢出:可见我可以在md-grid-tiles里面看到整个md-card

md-grid-tile {
    display: block;
    position: absolute;
    overflow: visible;
}

这样可以吗？或者我如何在同一"行"中排列X卡？我应该使用其他方法吗？

谢谢.