Question

我正在学习创建一个带有nodejs（express）和前端角度的API。

我应该怎么想，我想要什么：当用户访问www.url.com/ ID 时，他会显示 ID 的数据。但实际上我遇到了问题......

服务文件将获取我的数据。

ServiceFile.ts

getAllPosts(): Observable<Project[]> {
        return this.http
            .get(this._postsURL)
            .map((response: Response) => {
                return <Project[]>response.json();
            })
            .catch(this.handleError);
    }
getPost(id: string): Observable<Project> {
        return this.getAllPosts()
            .map(projects => projects.find(project => project._id === id));
    }

我的组件文件，用于通过ID网址示例获取我的数据＆＃34; www.url.com/ ID ＆＃34;拨打我的服务并将数据发送到我的html文件

my component.ts

_postssArray: any;

ngOnInit(): void {
        this.route.paramMap.subscribe(params => {
            const id = params.get('id');
            this._projectService.getPost(id)
                .subscribe(
                    data => {
                        this._postssArray = data;
                        console.log(this._postssArray);
                    }
            );
        });
    }

迭代到我的组件发送的数据变量

View.html文件

<div *ngFor="let post of _postssArray">
    <div class="text-cadre">
        <div class="title-cadre">
            <h4>{{post.title}}</h4>
            <hr>
        </div>
        <p>{{post.text_preview}}</p>
    </div>
</div>

的console.log

对象

{_id：＆＃34; xxxxxxxxxxx＆＃34;，title：＆＃34; data＆＃34;，text_preview：＆＃34;数据数据 data＆＃34;，text：＆＃34;数据数据＆＃34; }

错误

错误错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39; 类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如阵列。

Answer 1

你不需要这里的ngFor，因为没有数组。 getPost中的find函数将始终返回一个帖子

<div class="text-cadre">
        <div class="title-cadre">
            <h4>{{post.title}}</h4>
            <hr>
        </div>
        <p>{{post.text_preview}}</p>
    </div>

_post: any;

ngOnInit(): void {
        this.route.paramMap.subscribe(params => {
            const id = params.get('id');
            this._projectService.getPost(id)
                .subscribe(
                    data => {
                        this._post = data;
                        console.log(this._post);
                    }
            );
        });
    }

从API服务角度

1 个答案: