Как использовать угловые таблицы данных 6 с наблюдаемыми данными со стороны сервера (MySQL, Java, Springboot и Hibernate) или Как преобразовать наблюдаемое в массив? - PullRequest
Новая
       25

Как использовать угловые таблицы данных 6 с наблюдаемыми данными со стороны сервера (MySQL, Java, Springboot и Hibernate) или Как преобразовать наблюдаемое в массив?

0 голосов
/ 22 января 2019

смотри: ОШИБКА сталкивается из-за использования mf.data ... когда я удаляю mf из данных {(mf.) Data}, система хорошо отображается, но функции таблицы данных не будут работать.

ClientsComponents.html: 4 ОШИБКА Ошибка: ошибка при попытке изменить '[объект объекта]'.Разрешены только массивы и итерации в сервисном методе

для получения всех клиентов: использование Pipe и map из-за устаревшего 'do'

см. Мой импорт: 

 import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...
 getClients(): Observable<Signup[]>{
    return this.http.get<Signup[]>('http://localhost:8080/api/clients/all')
    .pipe(map(data => return data));
    }

Компонент для получения клиентов от угловой службы: 

showClients(enable: boolean) {
    this.showClient = enable;

    if (enable) {
      this.data = this.signupService.getClients();
      //this.data = this.clients ;
        console.log("Component : ");    
        console.log(this.data);   
    }
  }

Шаблон таблицы данных HTML: точка останова : * ngFor триггеров :: Здесь допускаются только массивы или итерируемые ошибки ... 

    <div class="container">
        <button class="button btn-info" *ngIf='showClient' (click)='showClients(false)'>Hide Clients</button>
        <button class="button btn-info" *ngIf='!showClient' (click)='showClients(true)'>show Clients</button>
            <div [hidden]="!showClient">    


                  <div class="panel panel-primary">
                    <div class="panel-heading">List of clients</div>
                    <!--   start  -->

                    <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
                    <thead>
                    <tr>
                        <th style="width: 20%">
                            <mfDefaultSorter by="name">Name</mfDefaultSorter>
                        </th> ...
                    </thead>
                    <tbody>
                        <tr *ngFor="let x of mf.data | async" >
                        <td class="text-right">{{x.fname}}</td>
...

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Вы должны подписаться на наблюдаемые, что-то вроде: 

showClients(enable: boolean) {
    this.showClient = enable;

    if (enable) {
      this.signupService.getClients().subscribe(
         res => {
             this.data = res;
             console.log("Component : ",this.data);    
         }, 
         err => { console.log(err); }
       );
    }
  }
0 голосов
/ 22 января 2019 
getClients(): Observable<Signup[]>{
    return this.http.get<Signup[]>('http://localhost:8080/api/clients/all')
}

showClients(enable: boolean) {
    this.showClient = enable;

    if (enable) {
      this.data = this.signupService.getClients();
    }
  }

<ng-container *ngIf="(data | async) as array">
        <tr *ngFor="let x of array " >
        <td class="text-right">{{x.fname}}</td>
</ng-container>
...