在 Ionic 中显示来自后端的数据答案

【问题标题】：Display Data from Backend in Ionic在 Ionic 中显示来自后端的数据
【发布时间】：2020-05-25 04:36:26
【问题描述】：

我有一个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>

This is my console.log, as you see i get the data, now i want it to show for example the name on frontend.

【问题讨论】：

您应该在searchChanged() 中进行控制台日志或调试，以查看this.results 是否在list.page.ts 中更新。如果没有，则在您的服务中还有另一个问题与返回可观察对象有关。您必须订阅 observable 才能从中检索数据。那是searchChanged() { this.userService.searchData(this.searchTerm, this.type).subscribe(res => this.results = res); }
到底是什么问题？您无法从后端获取数据？您可以从后端获取数据，但在前端没有显示？不知结果是否为空（使用console.log查看）。
在 console.log 中，我从后端获取数据，如姓名、城市等。我的问题是它没有在前端显示数据。例如，我想在前端显示名称。

标签： php angular ionic-framework frontend backend

【解决方案1】：

好的，我在 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 响应没有类似 'Search' 的条目。

【讨论】：

【解决方案2】：

如果您看到 console.log 更新，那么这很可能是 html 模板不知道某些需要重新渲染和更新视图的数据已更改的问题。 Angular 内置了变更检测策略，但作为开发人员，您也可以手动与之交互。结帐 (https://angular.io/api/core/ChangeDetectorRef) 以获取有关此主题的进一步说明。

至于您的代码，尝试通过从@angular/core 导入ChangeDetectorRef 来插入更改检测引用，然后检查数据更改以告诉视图重新渲染。

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()
    }

注意：这将在每次用户键入时执行，它可能会减慢您的应用程序，因为您每次调用 searchChanged() 时都会强制 angular 检查更改。因此，我将实施某种去抖动技术来停止对searchChanged() 的冗余或不必要的调用。如果出现此问题，请查看此资源以了解有关去抖动 (https://rxjs-dev.firebaseapp.com/api/operators/debounce) 的更多信息。

【讨论】：