Шоу с данными Angular Material [object Object]

Я пытаюсь реализовать компонент с данными, используя Express и Firebase DB.

Вот как данные моего запроса на обслуживание

gettext() {
  return this.http.get<nomchamp[]>(this.url)
      .map(res => { console.log(res); return res });
}

console.log печатает:

[{…}]
       0: {text: "testoooo"}
       length: 1__proto__: Array(0)

Я создал модель

export interface nomchamp {
    text: String;
}

Вот мой компонент с данными

export class DatatableComponent implements OnInit {

  constructor(private dataService: AjouttextService) { }
  data = [];

  displayedColumns = ['text'];
  dataSource = new UserDataSource(this.dataService);
  ;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
  }



  ngOnInit() {
  }
}
export class UserDataSource extends DataSource<any> {
  constructor(private dataService: AjouttextService) {
    super();
  }
  connect(): Observable<nomchamp[]> {
    return this.dataService.gettext()
  }
  disconnect() { }
}

И хтмл:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="text">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element}} </mat-cell>
    </ng-container>



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

В моем экспресс-маршруте я отправляю объект данных, а затем вызываю его в маршруте получения

router
  .route("/")
  .get(function (req, res, err) {

    // Get a database reference to our posts
    var db = admin.database();
    var ref = db.ref("/");

    // Attach an asynchronous callback to read the data at our posts reference
    ref.on("value", function (snapshot) {
      res.send(snapshot.val());

      console.log(snapshot.val());
    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
  });

router
  .route("/")
  .post(function (req, res, err) {

    // Get a database reference to our posts
    var db = admin.database();
    var ref = db.ref("/");

    // Attach an asynchronous callback to read the data at our posts reference
    ref.set(
      [{ text: "testoooo" }]
    );
  });

В моем datatable я получаю этот предварительный просмотр

[object Object]

введите здесь описание изображения

Я нашел тот же вопрос здесь но формат полученных данных не такой, как в вопросе, потому что у меня нет массива Вот что присылает почтальон

[
      {
          "text": "testoooo"
      }
]

person infodev    schedule 12.02.2018    source источник
comment
Вы ищете ["tesstooo"] ?   -  person Striped    schedule 13.02.2018
comment
да, и у меня будет несколько значений, например [testooo,blabla,...]   -  person infodev    schedule 13.02.2018
comment
Учитывая, что ваши строки уже находятся в массиве с именем tab, а затем просто ref.push().set({nomchamp: tab}), я не понимаю, что вы ищете?   -  person Striped    schedule 13.02.2018
comment
я обновил свой пост   -  person infodev    schedule 13.02.2018
comment
text: String; Может ваша модель не та? Потому что кажется, что вам нужна строка здесь. И почтальон отправляет массив. Попробуйте сменить модель.   -  person Striped    schedule 13.02.2018
comment
Используете ли вы промежуточное ПО JSON с Express? Вы публикуете в формате JSON? Из [object Object] похоже, что ваш объект где-то преобразуется в строку. Каковы именно результаты в angular, в экспрессе и в консоли firebase после каждого шага?   -  person Jason Goemaat    schedule 13.02.2018
comment
Опубликовать свой угловой компонент и шаблон html?   -  person Adam Cox    schedule 13.02.2018
comment
Я внес некоторые изменения в маршрут получения сервера, теперь я получаю массив, но угловые данные принимают объект как значение массива, поэтому я снова получаю object Object   -  person infodev    schedule 14.02.2018
comment
@AdamCox Я добавил html и компонент   -  person infodev    schedule 15.02.2018
comment
@infodev, пожалуйста, просмотрите мой пример того, как использовать наблюдаемые (например, http) для назначения возвращаемых данных компоненту таблицы материалов... stackblitz.com/edit/   -  person Adam Cox    schedule 15.02.2018


Ответы (1)


Подписавшись, можно назначать/передавать данные из http или любой другой службы, которая возвращает наблюдаемое, в компонент таблицы материалов Angular (или другой элемент управления презентацией). См. мой пример stackblitz: Представление наборов табличных данных с использованием компонента Angular Material Table и Observable.

person Adam Cox    schedule 16.02.2018