小编Lad*_*dos的帖子

我有一个带有排序标题的普通Angular Material 2 DataTable.所有排序都是标题工作正常.除了具有对象作为值的那个.这些根本不排序.

例如:

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

请注意 element.project.name

这是displayColumn配置:

 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

更改'project.name'到'project'不工作,也不"project['name']"

我错过了什么？这甚至可能吗？

这是Stackblitz: Angular Material2 DataTable排序对象

编辑: 谢谢你的所有答案.我已经使用动态数据了.所以我不必为每个新的嵌套属性添加switch语句.

这是我的解决方案:(创建一个扩展MatTableDataSource的新DataSource不是必需的)

export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {

  sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
    (data: WorkingHours, sortHeaderId: string): string | number => {
      let value = null;
      if …

我有一个网站，用 webpack 设置。我添加了 Font Awesome Pro 并为其配置了全局令牌。所以 Pro Icons 正在工作。

但有些不喜欢fa-github或fa-twitter。这些实际上甚至是免费图标。几天前，他们工作了。

这是我如何设置所有内容的代码：

包.json：

"dependencies": {
    "@fortawesome/fontawesome": "^1.1.5",
    "@fortawesome/fontawesome-free-brands": "^5.0.9",
    "@fortawesome/fontawesome-pro-light": "^5.0.9",
    "@fortawesome/fontawesome-pro-regular": "^5.0.9",
    "@fortawesome/fontawesome-pro-solid": "^5.0.9",
    "@fortawesome/fontawesome-pro-webfonts": "^1.0.5",
}

主文件：

$fa-font-path: "~@fortawesome/fontawesome-pro-webfonts/webfonts";
@import '~@fortawesome/fontawesome-pro-webfonts/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-pro-webfonts/scss/fa-light.scss';

网络包：

resolve: {
    alias: {
      '@fortawesome/fontawesome-pro-solid$': '@fortawesome/fontawesome-pro-solid/shakable.es.js',
      '@fortawesome/fontawesome-pro-regular$': '@fortawesome/fontawesome-pro-regular/shakable.es.js',
      '@fortawesome/fontawesome-pro-light': '@fortawesome/fontawesome-pro-light/shakable.es.js'
    }
  },


<i class="fal fa-check"></i> // Does work
<i class="fal fa-github"></i> // Does not work
<i class="fal fa-twitter"></i> // Does not work

我错过了什么？我是否必须为这些导入另一个 CSS 文件？我没有找到。

编辑：添加了文件夹结构的照片：

我用官方指南创建了一个自定义主题。

@import '../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core();

$primary: mat-palette($mat-teal);
$accent: mat-palette($mat-deep-orange);
$warn: mat-palette($mat-amber);

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

@include angular-material-theme($theme);

它确实有效。md-toolbar我可以设置 a或md-buttonwith的颜色$primary。但我无法访问组件 SCSS 中的颜色变量。

:host {
  .mat-grid-tile-header {
    background-color: $primary;
  }
}

网络风暴中的错误：

"Element 'primary' is resolved only by name without using of explicit imports"

构建失败后出现错误：“未定义的变量”

好吧，我必须以某种方式导入它。但我不明白怎么办。

我尝试过导入主题：

"Element 'primary' is resolved only by name without using of explicit imports"

Webstorm中的错误已经消失，但是构建后出现了新的错误：

Module build failed: 
undefined
            ^
      (50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, 300: #4db6ac, 400: …

我有一个Angular应用程序，该应用程序存储在AWS S3存储桶中，并由Cloudfront分发。

现在，我想以多种语言发布我的应用程序。我已经翻译了我的角度应用程序和构建中使用的每种语言。

因此，我的S3存储桶如下所示：

de
   /index.html
   /script.js
en
   /index.html
   /script.js

对于每种语言，我想提供另一个应用程序。

在Cloudfront中，我创建了两个Origins，分别指向Origin Path /de和/en

所以我的URL架构是这样的：

<appname>.<mydomain>.com/:lang

但是我的问题是，我没有使用这些特定语言文件夹的错误页面。我需要这些错误响应处理程序，以在发生404错误时（由于重新加载）交付有角度的应用程序

有谁知道我该怎么解决？还是应该为每种语言再创建一个子域？所以看起来像这样：

<lang>.<appname>.<mydomain>.com