Question

我正在Angular项目中工作，我想实现Angular Datatables。人们建议我使用Material Datatables。

通常使用JS我将图标添加到数据表行：

{
      field: "Actions",
      width: 110,
      title: "Acciones",
      sortable: false,
      overflow: "visible",
      template: function(row, index, datatable) {
        return (
          '\
                    <a href="#/categorias/usuarios/detalle/' +
          row.id +
          '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">\
                        <i class="fa fa-edit"></i>\
                    </a>\
                    <a  href="#/categorias/usuarios/eliminar/' +
          row.id +
          '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Edit settings">\
                        <i class="fa fa-trash"></i>\
                    </a>\
                '
        );
      }
    }

现在我已经实现了Material DataTables，我怎么能做同样的事情，但是将Angular用于打字稿？

Component.html

  <div>
        <mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.id}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="nombre">
            <mat-header-cell *matHeaderCellDef> Nombre </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.nombre}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="apellido">
            <mat-header-cell *matHeaderCellDef> Apellido </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.apellido}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="perfil">
            <mat-header-cell *matHeaderCellDef> Perfil </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.perfil}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="ultimoLogin">
            <mat-header-cell *matHeaderCellDef> Último Login </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.ultimoLogin}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="activo">
            <mat-header-cell *matHeaderCellDef> Activo </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.activo}} </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
        </mat-table>
      </div>

服务：

export class UsuariosService {

  private serviceUrl = "MyUrl";
  headers = new Headers({
    Authorization:
      "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token,
    "Content-Type": "application/json"
  });
  options = new RequestOptions({ headers: this.headers });

  constructor(private http: Http, private httpClient: HttpClient) {}

  getUser(): Observable<User[]> {
    return this.httpClient.get<User[]>(this.serviceUrl);
  }

组件：

    export class UsuariosComponent {
      dataSource = new UserDataSource(this.UsuariosService);
      displayedColumns = [
        "id",
        "nombre",
        "apellido",
        "email",
        "perfil",
        "ultimoLogin",
        "activo"
      ];

export class UserDataSource extends DataSource<any> {
  constructor(private userService: UsuariosService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
  }
  disconnect() {}
}

如何像使用JS文件一样添加带链接按钮的新行？此致

Answer 1

像这样添加另一个ng容器 <ng-container matColumnDef="action"> <mat-header-cell *matHeaderCellDef> Action </mat-header-cell> <mat-cell *matCellDef="let row"> <button mat-icon-button> <mat-icon>edit</mat-icon> </button> <button mat-icon-button> <mat-icon>delete</mat-icon> </button> </mat-cell> </ng-container>
    同时更新您的显示列数组以显示action列
    displayedColumns = [ "id", "nombre", "apellido", "email", "perfil", "ultimoLogin", "activo", "action" ];

    的更新
    在您的模块中导入MatIconModule     import { MatIconModule} from '@angular/material

Answer 2

与@yousef一样，建议的图标添加也很容易使用“ mat-icon”标签。我们需要将Material Icons包含到我们的项目中。我在下面的github链接中提到了将mat-icons包含到我的项目中。

CSS for MAT-ICONS

要遵循的步骤：

在带有主题图标的“主题”文件夹中创建一个文件夹。
创建material-icons.scss文件并复制上面的github链接中提到的css内容。
下载并放置MaterialIcons-Regular.woff2，MaterialIcons-Regular.woff，MaterialIcons-Regular.ttf，MaterialIcons-Regular.eot并放置在mat-icons文件夹内。
按如下所示将这个material-icons.scss导入您的theme.scss中：

@import“ mat-icons / material_icons”

此步骤将使我们可以在整个项目中使用素材图标。

使用材质DataTables添加带图标的行

2 个答案: