2

我在 Angular 应用程序中有几个导航按钮。我要做的是删除第一页上的“Prev”和最后一页上的“Next”。

我要做的就是设置两个布尔值，说明它是第一页还是最后一页。

麻烦的是我还没有设法理解这些subscribers和behaviours.

我可以创建一个计算最后一页的函数，totalItems所以itemsPerPage请不要担心，我只是不知道如何从这个订阅中调用一个函数。

如果有人可以请告诉我如何编写回调或其他任何需要这样做的东西，我将永远感激不尽。

组件.html：

<div class="pagination-panel clearfix">
    <button (click)="previousPage()" *ngIf="firstPage != true">Prev</button>
    <button (click)="nextPage()" *ngIf="lastPage != true">Next</button>
</div>

<!-- How the data is used, if that helps  -->
<h2 class="spray-header">Presenters</h2>
<article *ngFor="let presenter of (presenters$ | async)?.data" class="presenter-item">
    <div class="presenters-header">
        <h3 class="presenters-title margin-none">
            <a [routerLink]="['/presenters', presenter.id]">{{presenter.name | uppercase}}</a>
        </h3>
        <p class="presenters-details">{{presenter.details}}</p>
    </div>
    <img src="{{presenter.small_thumb}}" class="presenters-profile-picture profile-picture">
</article>

组件.ts

import {Component, OnInit, Inject} from '@angular/core';
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
import {BehaviorSubject} from "rxjs/BehaviorSubject";
import {ActivatedRoute, Router} from "@angular/router";

export class PresentersComponent implements OnInit {
    firstPage = true;
    lastPage = false;
    presenters$ = new BehaviorSubject([
        {
            data: {
                id: 0,
                name: "Loading...",
                details: "Loading...",
                small_thumb: "",
                radio_shows: []
            },
            currentPage: 1,
            itemsPerPage: 0,
            totalItems: 0
        }
    ]);

    constructor(@Inject('api') private api,
                private colorService: ColorService,
                private http: Http,
                private route: ActivatedRoute,
                private router: Router) {
        route.params
            .map((p: any) => p.page)
            .switchMap(page => http.get(api + '/presenters?page=' + page))
            .map(res => res.json())
            .subscribe(this.presenters$);
    }
}

更新 1

像这样的东西可以吗？

console.log(x);似乎给了我正确的数据，但现在我的(presenters$ | async)?.data东西都没有工作。

        .subscribe(
            function (x) {
                console.log(x);
                this.presenters$ = x;
            },
            null,
            function () {
                console.log("set the values here");
            }
        );

更新 2

上面的中断是因为this引用了函数调用（duh！），但是在尝试使用胖箭头时出现错误，有人知道我在这里做错了什么吗？

.subscribe(
    x => this.presenters$ = x,
    null,
    function () {
        console.log("set the values here");
   }
);

以上不会抛出错误，但仍然async无法正常工作。

下面抛出此错误：“错误：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'”

.subscribe(res => {
    this.presenters$ = res;
    // Any other lines here.
});

根据下面的链接，看起来我只需要删除异步管道，稍后再试一试。Angular 4：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

更新 3

通过从模板中的数据调用中删除异步管道，(presenters$ | async)?.data"我克服了上次更新中的错误并设法获得了我在开发环境中工作后的功能。

// component.html change
(presenters$)?.data

// latest subscribe that I have working, sort of
.subscribe(res => {
    this.presenters$ = res
    // got extras lines of code working here
});

现在的问题是它无法编译用于生产。当我尝试编译时，出现此错误：

ng:///var/www/html/io->radio/src/app/presenters/views/presenters.component.html (2,1) 中的错误：“行为主题”类型上不存在属性>“数据” { 数据：{ id：号码；>名称：字符串；详细信息：字符串；小拇指：字符串；radio_s ...'。

更新 4

我开始认为我在这里完全是个垃圾，这BehaviorSubject不是我应该使用的。我要做的就是从我的 API 调用数据并将其映射到一个对象，如果有人能告诉我我在这里做错了什么，那将是一个很大的帮助。

我认为我的问题是由于对 BehaviorSubject 的不当使用以及对异步管道缺乏了解造成的。

我的下一步是尝试来自@DeborrahK 的非常明智的建议，并创建一个用于检索数据的服务。

4

1 回答 1

1

诀窍是在多行代码周围添加花括号。我有一个下面的例子。

.subscribe(res => {
                this.presenters$ = res;
                // Any other lines here.
            });

但是您可能需要考虑这样的事情：

ngOnInit(): void {
    this.route.params.subscribe(
       params => {
            const id = +params['id'];
            this.getMovie(id);
            // I could have more lines of code here.
        }
    );
}

这段代码在组件初始化时执行。它监视参数的变化，并随着参数的变化获取不同的数据。如果参数不变，您可以大大简化上述代码。

getMovie(id: number): void {
    this.movieService.getMovie(id)
        .subscribe(
              movie => {
                this.onMovieRetrieved(movie);
                // I could have more lines of code here
              },
              error => {
                 this.errorMessage = <any>error;
                 // I could have more lines of code here
              }
         );
}

此代码调用服务来检索数据。就在subscribe()这里。http.get 在服务内。

这使用电影而不是您拥有的数据，但概念和结构是相同的。

我在这里有一个完整的例子：https ://github.com/DeborahK/MovieHunter

于 2017-08-07T22:12:32.767 回答