Отображение данных из бэкенда в Ionic - PullRequest
Новая
       5

Отображение данных из бэкенда в Ionic

1 голос
/ 09 февраля 2020

У меня есть user.service, list.page.ts и list.page.html.

И я хочу отобразить данные из бэкэнда (php). Я получаю данные в журнале консоли, но они не отображаются на веб-сайте. Пожалуйста помоги. Спасибо!

user.servive

    export enum SearchType {
    all = '',
    name = 'name',
    stadt = 'stadt'
}
@Injectable({
  providedIn: 'root'
})
export class UserService {

    url = 'http://127.0.0.1:8000/getallrestaurants';

  constructor(public http: HttpClient) { }

  searchData(name: string, type: SearchType): Observable<any> {
    return this.http.get('http://127.0.0.1:8000/getallrestaurants')
    .pipe(
        map(results => {
            console.log('RAW: ', results);
            return results['Search'];
        })
    );
  }

list.page.ts

export class ListPage implements OnInit {


    results: Observable<any>;
    searchTerm = '';
    type: SearchType = SearchType.all;

    constructor(private userService: UserService) { }


    ngOnInit() {}

    searchChanged() {
        this.results = this.userService.searchData(this.searchTerm, this.type);

    }

list.page.html

<ion-searchbar [(ngModel)]="searchTerm" (ionChange)="searchChanged($event)"></ion-searchbar>

<ion-item>
    <ion-label>Select Searchtype</ion-label>
    <ion-select [(ngModel)]="type" (ionChange)="searchChanged($event)">
        <ion-select-option value="">All</ion-select-option>
        <ion-select-option value="stadt">Stadt</ion-select-option>
        <ion-select-option value="name">Name</ion-select-option>
    </ion-select>
</ion-item>

  <ion-list>
    <ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'list', item.imdbID ]">
        <ion-icon [name]="item.icon" slot="start"></ion-icon>
        <p>Hallo User: {{item.name}}</p>
      </ion-item>

Это В моем console.log, как вы видите, я получаю данные, теперь я хочу, чтобы он показывал, например, имя в веб-интерфейсе.

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

Хорошо, я вижу проблему здесь в классе user.service, вы должны изменить его следующим образом. 

searchData(name: string, type: SearchType): Observable<any> {
    return this.http.get('http://127.0.0.1:8000/getallrestaurants')
    .pipe(
        map(results => {
            console.log('RAW: ', results);
            return results;
        })
    );
  }

Вы должны удалить ['Search'], потому что ваш JSON Ответ не имеет запись, которая похожа на «Поиск».

0 голосов
/ 10 февраля 2020

Если вы видите console.log обновление, то, скорее всего, это проблема с шаблоном html, который не знает, что некоторые данные изменились, и для этого ему необходимо выполнить повторную визуализацию и обновить представление. Angular имеет встроенную стратегию обнаружения изменений, но как разработчик вы также можете вручную взаимодействовать с ней. Оформить заказ (https://angular.io/api/core/ChangeDetectorRef) для получения дополнительных пояснений по этой теме. c.

Что касается вашего кода, попробуйте вставить ссылку на обнаружение изменений, импортировав ChangeDetectorRef из @angular/core. и затем проверьте наличие изменений данных, чтобы сообщить представлению о повторной визуализации.

list.page.ts

export class ListPage implements OnInit {


    results: Observable<any>;
    searchTerm = '';
    type: SearchType = SearchType.all;

    constructor(private userService: UserService, private ref: ChangeDetectorRef) { }

    ngOnInit() {}

    searchChanged() {
        this.results = this.userService.searchData(this.searchTerm, this.type);
        this.ref.detectChanges()
    }

Примечание: это будет выполняться каждый раз, когда пользователь введите, и это может замедлить работу вашего приложения, поскольку вы заставляете angular проверять наличие изменений каждый раз, когда вы звоните searchChanged(). Таким образом, я бы реализовал какую-то технику debounce для остановки избыточных или ненужных вызовов на searchChanged(). Ознакомьтесь с этими ресурсами, чтобы узнать больше об устранении неполадок при возникновении этой проблемы (https://rxjs-dev.firebaseapp.com/api/operators/debounce).

...