Ionic ngfor在离子Angular 中显示多张卡时不起作用

zfciruhq  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(126)

早上好,我正在使用一个我在laravel中制作的API,到目前为止,如果我带来的数据很好,因为我测试了他们的控制台。现在的问题是,当我在ionic中生成一些卡来显示我正在使用的数据时,并没有显示任何东西,所有这些我都是用ngfor做的,当我删除它时,显示的是示例卡。
代码和示例
后列表组件

<ion-list>
    <ion-list-header> Usuarios </ion-list-header>
    <app-post-item *ngFor=" let item of usaurios" [usuario]="item">
    </app-post-item>
</ion-list>

项目后组件

<ion-item>
    <ion-avatar slot="start">
        <img src="https://i.pravatar.cc/150?img=2" />
    </ion-avatar>
    <ion-label>
        <h2>Finn</h2>
        <h3>I'm a big deal</h3>
        <p>Listen, I've had a pretty messed up day...</p>
    </ion-label>
</ion-item>

样品x1c 0d1x
当我删除post-list组件中的*ngFor=" let item of usaurios" [user]="item"时,现在得到的是

我真的不知道我做错了什么,或者我是否有错......
逻辑学
user.service

export class UserService {
    public url: String = environment.url;
    public usuarios$ = new Subject<Usuario[]>(); 
    public usuario$ = new Subject<Usuario>();

    public usuarios: Usuario[] = [];
    public usuario: Usuario;
    constructor(public http: HttpClient) {}
    all$(): Observable<Usuario[]> {
        return this.usuarios$.asObservable();
    }
    all(): Observable<any> {
        this.usuarios = [];
        return this.http.get<Usuario[]>(this.url + 'usuario').pipe(
            map ((res: any[]) => {
                Array.from(res).forEach((item: any) => {
                    this.usuario = new Usuario();
                    this.usuario.set(item);
                    this.usuarios.push(this.usuario);
                });
                this.usuarios$.next(this.usuarios);
                console.log(res);
            })
        );
    }
}

post-list.component

export class PostListComponent implements OnInit {
    public usaurios: Usuario[] = [];
    public usuario: Usuario;
    public usuarioSubscription = new Subscription();

    constructor(
        public userservice: UserService
    ) {}

    ngOnInit() {
        this.usuarioSubscription = this.userservice.all$().subscribe((res: Usuario[])=>{
            this.usaurios = res;
        });
        this.userservice.all().subscribe(res => {
            console.log('Listo...');
        });
    }
}

控制台:

post-list-component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Usuario } from 'src/app/models/usuario';

@Component({
    selector: 'app-post-item',
    templateUrl: './post-item.component.html',
    styleUrls: ['./post-item.component.scss'],
})
export class PostItemComponent implements OnInit {
    @Input() usuario: Usuario;
    constructor() {}

    ngOnInit() {}
}
w8biq8rn

w8biq8rn1#

从代码中可以看到,您正在执行console.log(res),它将来自API的数据显示为{ data: [...] }。但是您在res上运行循环,这意味着循环实际上并没有在this.usuario中插入任何值。这就是为什么当您运行*ngFor=" let item of usaurios"时,您看不到任何内容,因为您的数组是空的(usaurios是[])。
尝试Array.from(res.data).forEach((item: any) => { ... },看看是否可以解决问题。您也可以添加console.log(this.usuario)来验证数组是否正确填充。

fivyi3re

fivyi3re2#

我认为错误是在forEach中添加的。
代码

all(): Observable<any> {
        return this.http.get(`${this.url}usuario`).pipe( // <-- URL and pipe is for 404 error
            map((res: any) => {
                this.usuarios = res.data; // receives the data and stores it in the users variable
                this.usuarios$.next(this.usuarios); // sends the data to the usuarios$ variable so that it can be subscribed in the component
                return this.usuarios; // returns the data that is in the users variable
            }),
            catchError(err => {
                console.log(err);
                return err;
            }),
        );
    }

这对我很有效

相关问题