Добавить строку с иконками, используя материал DataTables

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

Как и @yousef, предлагаемое добавление иконок легко с тегом "mat-icon".Нам нужно включить значки материалов в наш проект.Ниже я указал ссылку на github, чтобы включить mat-icons в мой проект.

CSS для MAT-ICONS

Шаги, которые необходимо выполнить:

1. Создайте папку внутри папки "theme" с помощью mat-icons.
2. Создайте файл material-icons.scss и скопируйте содержимое css, упомянутое в приведенной выше ссылке на github.
3. Загрузите и поместите MaterialIcons-Regular.woff2, MaterialIcons-Regular.woff, MaterialIcons-Regular.ttf, MaterialIcons-Regular.eot и поместите его в папку mat-icons.
4. Импортируйте этот материал-icons.scss в ваш theme.scss, как указанониже:

@ import "mat-icons / material_icons"

Этот шаг позволит использовать mat-icons в нашем проекте.

Answer 2

Добавьте еще один 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