标签: angular-material2

我在我的组件中使用cdk-virtual-scroll-viewport+cdkVirtualFor并且它似乎工作正常。

然而，在该组件的单元测试中，项目不会被渲染。

我基于此示例制作了一个示例应用程序，虽然该示例在您为该应用程序提供服务时有效，但我编写的测试失败了。

app.module.ts

import { ScrollingModule } from '@angular/cdk/scrolling';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ScrollingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export …

怎么可能，在 mat-list-option 元素内的 mat-selection-list 中添加辅助操作（mat-icon-button）。

目前所有项目都添加到 mat-list-text div 中。

示例（https://stackblitz.com/edit/angular-dwac7y）：

<mat-selection-list [(ngModel)]="selectedOptions">
    <mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true">
        <mat-icon matListAvatar>person</mat-icon>

        <h3 matLine> {{item.name}}</h3>
        <p matLine>
            {{item.details}}
        </p>

        <button mat-icon-button (click)="onEdit($event, item)">
            <mat-icon>edit</mat-icon>
        </button>
    </mat-list-option>
</mat-selection-list>

Angular 6/7，材料设计。

由于我无法访问项目总数，因此项目计数无关紧要（屏幕截图中的框）。

如何完全删除项目计数？或者显示我当前所在的页面而不是项目数？

<mat-paginator
    itemsPerPageLabel="Items per page"
    (page)="changePage()"
    [length]="resultsLength"
    [pageSizeOptions]="[10, 100]">
</mat-paginator>

我从 API 得到这样的字符串，55,118,122,126,116,58,125,119,132。这些是id。我有一个角垫选择列表。我想最初选择这些值。所以，基本上我想更新现有数据并再次发送。

这是我的垫子选择清单。

 <mat-selection-list #yuvakslist  [(ngModel)]="preselectedOptions" 
(selectionChange)="onChangeYuvak()">
<mat-list-option *ngFor="let yuvak of yuvaks" class="mt-1" [value]="yuvak.user_id">
          <nb-user name="{{yuvak.cnt_first_name + ' ' + 
 yuvak.cnt_last_name}}" size="large" title="{{yuvak.cnt_mobile_no}}"
          picture="{{thumbnailImg}}{{yuvak.profile_picture}}">
          </nb-user>
        </mat-list-option>
      </mat-selection-list>

我尝试将我从 API 收到的所有 ID 分配给这样的数组。

const preselectedOptions: Number[] = data.data.present_contact;

我想在 mat-selection-list 上预先选择这些值。所以，我可以更新表格。

我想做一个Angular 7应用程序，所有encapsulation设置都为ViewEncapsulation.ShadowDom- 这一切都很好。

但我似乎无法找到任何可靠的参考资料，可以很好地解决像@angular/material. 由于全局样式毫无价值，我不能只遵循Theming Angular Material的规则，因为它们......好吧，不起作用。

有没有人设法让它以一种体面的方式工作？

tltr：我可以从 angular 访问资产目录吗？

我在一个文件夹src/assets/icons中有一堆 SVG ，我使用mat-icon. 唯一的缺点是当我添加一个新图标时，我必须添加文件，我必须将文件名添加到我用来循环添加到matIconRegistry. 有没有办法简单地从目录中读取所有文件？

这是我目前的解决方案：

@NgModule()
export class CustomIconModule {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    const icons = [
      'icon1', 'icon2',
    ];

    for (const icon of icons) {
      this.matIconRegistry.addSvgIconInNamespace(
        'my-namespace',
        icon,
        domSanitizer.bypassSecurityTrustResourceUrl(`./assets/icons/${icon}.svg`)
      );
    }
  }
}

更新：我编写了一个 bash 脚本，它循环遍历文件，生成一个 .ts 文件，其中包含所有文件名的数组并执行 .ts 文件git add。我在 pre-commit git hook 中运行它。不理想，但它现在有点工作。不过，我很想找到一个纯 JS 解决方案。

我尝试在我的自定义主题中导入角度材质主题文件，当我尝试生成 css 代码时出现错误：

$ sass src/_custom-theme.scss
Error: Can't find stylesheet to import.
  ?
2 ? @import '~@angular/material/_theming.scss';
  ?         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ?

这是我的文件的第一行。我也尝试了以下行，但出现相同的错误：

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

如果我尝试像这样导入文件，它会起作用：

@import '../node_modules/@angular/material/theming';

但奇怪的是，通过导入这样的预构建主题，只是为了测试，它可以工作

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'

WebStorm 设法生成 css 并在启动 web 应用程序时使用它，ng serve但仍显示错误消息。用webstorm和sass显示错误信息

版本：

• 角度：7.2.12
• 材料：7.3.7
• Sass：1.17.4 用 dart2js 2.2.0 编译

你有解决这个问题的想法吗？非常感谢。

我已经看到各种示例来使用扩展 mat-tree 中的所有节点

expandAll()

如果我们点击它，是否有任何机制可以扩展特定节点。就像是

node.expand()

我已经提到了 angular material 文档，但没有得到任何答案。如果有人经历过，请指导。

我使用 Angular-Material mat-table Flex，我希望额外的内容不要像这样显示。

这就是我所拥有的：

而我想要的是：

我尝试使用text-overflow: ellipsis，但如果有人有想法，它不起作用，我很感兴趣。

StackBlitz在这里

谢谢

我在这里使用这个例子来构建一个mat-tree使用 flat 的datasource. 现在我想重写默认padding-left是40px为所有的孩子之后。这就是我的做法：

mat-tree-node:not(:first-child) {
    padding-left: 16px;
}

这有效，但仅16px在树节点的第 2 级设置填充。当我继续扩展它们时，其余的嵌套子级不会累积 16px。是否可以覆盖matTreeNodePadding指令？