在此上下文中，这与有关角度材料表的任何其他问题均不重复。所有这些其他都是指角度 2-5，而不是 6

我得到了这个例外：

无法绑定到“dataSource”，因为它不是“table”的已知属性。("

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

如果我删除 [da,html,angular,typescript,angular-material"/>

时间戳

首页 > 解决方案 > 角度6的未知属性

在此上下文中，这与有关角度材料表的任何其他问题均不重复。所有这些其他都是指角度 2-5，而不是 6

我得到了这个例外：

无法绑定到“dataSource”，因为它不是“table”的已知属性。("

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

如果我删除 [da

html - 角度6的未知属性

在此上下文中，这与有关角度材料表的任何其他问题均不重复。所有这些其他都是指角度 2-5，而不是 6

我得到了这个例外：

无法绑定到“dataSource”，因为它不是“table”的已知属性。("

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

如果我删除 [da

问题描述

在此上下文中，这与有关角度材料表的任何其他问题均不重复。所有这些其他都是指角度 2-5，而不是 6

我得到了这个例外：

无法绑定到“dataSource”，因为它不是“table”的已知属性。("

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

如果我删除 [dataSource]，则异常是相同的，使用下一个特定指令。

HTML

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

    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef> Id </th>
      <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
    </ng-container>

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

app.module.ts

import {
    MatTabsModule,
    MatCardModule,
    MatInputModule,
    MatTableModule
} from "@angular/material";

@NgModule({
   declarations: [AppComponent, ProjektuebersichtComponent],
   imports: [
     BrowserModule,
     HazardRatingVerwaltungModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     ServicesModule,
     MatTabsModule,
     MatCardModule,
     MatInputModule,
     MatTableModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

包.json

"dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.5",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.5",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },

它应该基本上可以工作。但事实并非如此。我更新了所有依赖项并导入了所需的 MatTableModule。代码来自 material.angular.io。我不知道那里有什么问题。

我的回答并不具体，但这里有一些您可以在任何 CQRS 系统中使用的策略：

  1. 只需接受读取模型不是立即一致的事实（什么都不做）。示例 - 当我在 Twitter 上发布内容时，我可能不会立即在信息流中看到我的帖子，这没关系。它最终会出现在那里。
  2. 乐观的 UI 更新。只需更新 UI，就好像您的命令通过了一样。如果不是 - 没什么大不了的。示例 - 就像 Twitter 上的某些东西。您无需等待确认。如果以某种方式失败 - 它的状态将在下一次读取模型刷新时出现。
  3. 在 API 端点处等待。你的 API 被调用，你发出一个命令，并寻找特定的读取模型更新发生。超时失败。
  4. 在 UI 级别等待。您发送一个命令并显示一些“等待”的 UI 元素，直到您的查询返回您正在寻找的内容，或者超时失败。

使用策略 3 和 4，您可以使用某种服务器信号 - 套接字或类似的东西。您的读取模型可能能够确认它已更新。

标签： htmlangulartypescriptangular-material

解决方案

你不需要使用标签table。只需使用

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

    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef> Id </th>
      <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
    </ng-container>

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

它应该可以工作

推荐阅读