Question

AngularJS新手。我想在ng2表中显示一个图像，但由于html不在我手中，我无法这样做。代码附在下面。

服务档案

import {Injectable} from '@angular/core';

    @Injectable()
    export class SmartTablesService {
      smartTableData = [
        { img: 'assets/img/sky-bg.jpg',
          packageid: 21,
          orderid: 'Mark',
          lastName: 'Otto',
          username: '@mdo',
          email: 'mdo@gmail.com',
          age: '28'
        }
];
        getData(): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.smartTableData);
      }, 2000);
    });
  }
}

组件文件

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

import { SmartTablesService } from './smartTables.service';
import { LocalDataSource } from 'ng2-smart-table';

import 'style-loader!./smartTables.scss';

@Component({
  selector: 'smart-tables',
  templateUrl: './smartTables.html',
})
export class SmartTables {

  query: string = '';

  settings = {
    add: {
      addButtonContent: '<i class="ion-ios-plus-outline"></i>',
      createButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    },
    columns: {
      img: {
        title: 'img',
        type: 'html',
        valuePrepareFunction: (img) => { return `<img src="img" />` }
      },
      packageid: {
        title: 'Package ID',
        type: 'any'
      },
      orderid: {
        title: 'Order ID',
        type: 'string'
      },
      lastName: {
        title: 'Last Name',
        type: 'string'
      },
      username: {
        title: 'User Name',
        type: 'string'
      },
      email: {
        title: 'Email ID',
        type: 'string'
      },
      age: {
        title: 'Age',
        type: 'number'
      }
    }
  };

  source: LocalDataSource = new LocalDataSource();

  constructor(protected service: SmartTablesService) {
    this.service.getData().then((data) => {
      this.source.load(data);
    });
  }

  onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }
}

事先感谢您的青睐。

Answer 1

首先，您使用的库是ng2-smart-table。
你应该在valuePrepareFunction上修改你的return语句，如下所示（2种方式）：
1.使用``时你可以传递这样的值$ {img}。 ES。 {return public function searches(){ $search_data = $_POST['search_data']; $query = $this->news_model->get_live_items($search_data); foreach ($query as $row): echo "<li><a href='view/$row->id'>" . $row->title . "</a></li>"; endforeach; }}
你可以使用＆＃39; ＆＃39 ;, es <img src="${img}" />

Answer 2

constructor(private _domSanitizer: DomSanitizer) {}      

imageUrl: {
    title: 'image',
    filter: false,
    type: 'html',
    valuePrepareFunction: (imageUrl) => {
        return this._domSanitizer.bypassSecurityTrustHtml(`<img src="${imageUrl}" alt="Smiley face" height="50" width="50">`);
    },
}

如何在ng-2表中显示图像

2 个答案: