Angular 奇怪的obj标志无缘无故出现

我的

app.component.html

是：

<app-data-table [data]="data" [tableInfo]="productOrderInfo" (modified)="onModification($event)">
</app-data-table>

我不明白这个符号怎么会出现，因为我的data-table.component.html是完全空的。如果我在html文件中添加了一些东西，它就会出现，obj徽标也会出现

如果您真的想查看我的data-table.component.html，请点击此处：

---

你能共享app data table component.ts和html吗？html文件完全是空的，我在组件中没有做任何特殊的事情。ts请共享

app data table component.html

它也完全是空的，没有什么可共享的。没有空间，没有空行，什么都没有。如果我添加了一些内容，则无论我添加了什么，都会显示obj符号。在您共享的代码中，

app data table

closing标记后，您有一些字符。我想可能就是这样（实际上我很自信）。

import { Component, OnInit, Input, ViewChildren, QueryList, ViewChild, Output, EventEmitter, ElementRef, AfterViewInit, ComponentRef } from '@angular/core'; import { EditableValueComponent } from '../editable-value/editable-value.component'; import { ColumnInfo, TableInfo } from '../editable-value/editable-type'; import { MatTableDataSource, MatTable, MatSort, MatPaginator, MatDialog } from '@angular/material'; import { SelectionModel } from '@angular/cdk/collections'; import * as Lodash from 'lodash'; import { EditableOpenObjectComponent } from '../editable-value/editable-object/editable-open-object/editable-open-object.component';


export class TableInsert {   constructor(public rows: object) { } }

export class TableDelete {   constructor(public rows: object[]) { } }

export class TableUpdate {   constructor(public row: object, public column: string, public value: any) { } }

export class TableFeatures {   sort?: boolean;   filter?: boolean;   edit?: Array<string> | boolean;   select?: boolean;   insert?: boolean;   delete?: boolean;   save?: boolean;   close?: boolean;   header?: boolean;   pagination?: boolean; }

@Component({   selector: 'app-data-table',   templateUrl: './data-table.component.html',   styleUrls: ['./data-table.component.scss'] }) export class DataTableComponent implements OnInit {   @ViewChildren('editableValue') editableValues: QueryList<any>;   @ViewChild(MatTable, { static: true }) table: MatTable<any>;   @ViewChild(MatSort, { static: true }) sort: MatSort;  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

  @Input() tableInfo: TableInfo;   @Output() modified = new EventEmitter<TableUpdate | TableInsert | TableDelete>();   @Output() save = new EventEmitter<object[]>();   @Output() cancel = new EventEmitter<object[]>();

  defaultFeatures: TableFeatures;   dataSource = new MatTableDataSource<any>([]);   selection = new SelectionModel<any>(true, []);

  constructor(public dialog: MatDialog) {
    this.defaultFeatures = {
      sort: true,
      filter: true,
      pagination: true,
      edit: true,
      select: true,
      insert: true,
      delete: true,
      close: false,
      save: false,
      header: true,
    };   }

  @Input() set data(data: object[] | Promise<object[]>) {
    // data = Promise.resolve(data);
    // data.then(data2 => {
    //   this.dataSource.data = data2 === undefined ? [] : data2
    // });   }

  get data() {
    return this.dataSource.data;   }

  ngOnInit() {
    console.log(this.dataSource.data);
    this.dataSource.sort = this.sort;
    setTimeout(() => this.dataSource.paginator = this.paginator, 0);
    this.tableInfo.features = Object.assign({}, this.defaultFeatures, this.tableInfo.features);   }


  onSave() {
    this.save.emit(this.data as object[]);   }

  onCellClick(editableValue: EditableValueComponent, column: string) {
    if (
      this.openedEditableValue === undefined &&
      this.tableInfo.features.edit !== false &&
      (this.tableInfo.features.edit === true || (this.tableInfo.features.edit as any).indexOf(column) > -1)
    ) {
      editableValue.open = true;
    }   }

  onUpdate(row: object, column: string, value: any) {
    const update = new TableUpdate(Lodash.clone(row), column, value);
    row[column] = value;
    this.modified.emit(update);   }

  onInsert() {
    const dialogRef = this.dialog.open(EditableOpenObjectComponent, {
      width: '320px',
      data: { value: {}, typeInfo: this.tableInfo.columnInfo, title: 'Insert' },
      autoFocus: false,
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result !== undefined) {
        this.dataSource.data.unshift(result);
        this.modified.emit(new TableInsert(result));
      }
      this.dataSource.data = this.dataSource.data;
    });   }

  onDelete() {
    this.selection.selected.forEach((selected: object) => {
      this.dataSource.data.splice(this.dataSource.data.indexOf(selected), 1);
    });

    this.modified.emit(new TableDelete(this.selection.selected));

    this.selection.clear();
    this.dataSource.data = this.dataSource.data;   }

  onModification(row: object, column: string, modification: any) {
    this.modified.emit(new TableUpdate(row, column, modification));   }

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;   }

  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));   }

  get columnsWithSelect() {
    const columns = this.tableInfo.columnInfo.map(columnInfo => columnInfo.name);
    if (this.tableInfo.features.select) {
      columns.unshift('select');
    }

    return ['name'];   }

  get openedEditableValue(): any {
    let editableValue2: any;

    this.editableValues.forEach(editableValue => {
      if (editableValue.open === true) {
        editableValue2 = editableValue;
      }
    });

    return editableValue2;   }


  getDataSource() {
    console.log('abc');
    return new MatTableDataSource([]);   }

}