angular - 加载更多按钮角度

问题描述

我已经使用 Angular 和 Typescript 实现了一个加载更多按钮我想在开始时查看 6 个帖子，然后一旦我点击它，就会显示另外 6 个帖子，该按钮正在工作，但是，除非我点击按钮，否则所有帖子都被隐藏。我附上html代码和打字稿。请指教。谢谢

HTML

    `<button mat-button *ngIf="isMore" color="accent" class="load-more-container" (click)="onMore()">Load
    more</button>`

打字稿

  import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
} from "@angular/core";
import { Observable } from "rxjs";
import { BlogDetails, BlogResponse } from "../models/blog";
import { BlogService } from "../services/blog.service";
import { Router } from "@angular/router";
import { AuthService } from "../../../../providers/auth.service";
import { AuthenticationService } from "../../../../services/authentication.service";
import { SignupComponent } from "../../../../pages/authentication/signup/signup.component";

@Component({
  selector: "anms-blog-list",
  templateUrl: "./blog-list.component.html",
  styleUrls: ["./blog-list.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlogListComponent implements OnInit {
  @Input() agentFirstName: string;
  @Input() agentLastName: string;
  @Input() agendId: string;
  @Input() agentType: string;
  @Input() agentEmail: string;
  @Input() firstName: string;
  @Input() lastName: string;
  blogs: BlogDetails[];
  blogArray$: Observable<BlogDetails[]>;
  blogOutput$: Observable<BlogDetails[]>;
  // paginatorEnabled: boolean;
  moreData: any;
  limit = 1;
  isMore = true;
  isLimit: number;
  blogData: BlogDetails[];
  constructor(
    private blogService: BlogService,
    private router: Router,
    private authService: AuthService,
    private authenticationService: AuthenticationService
  ) {}

  ngOnInit(): void {
    // this.paginatorEnabled = true;
    this.blogArray$ = this.blogService.getBlogs();
    // this.blogOutput$ = this.blogService.firstPaginate();
    // this.blogOutput$.subscribe(blog => {
    //   this.blogs = blog as BlogDetails[];
    // });
    this.getData();
  }
  getData(){
    this.blogService.getBlogs().subscribe(res=>{
      this.blogData=res;
      this.moreData = this.blogData.slice(0, this.limit * 6);
      console.log(this.blogData)
      console.log(this.moreData)
    })
  }
  navigateBlog(id: string) {
    this.router.navigateByUrl("/blogs/" + id);
  }
  editBlog(id: string) {
    this.router.navigateByUrl("/blogs/edit/" + id);
  }
  onChangePage() {
  //  this.blogOutput$ = this.blogService.paginateNext();
  //  this.questionsOutput$.subscribe((question) => {
  //    this.questions = question as Question[];
   // });

//if (this.questions.length === this.previousLength)
    //  this.paginatorEnabled = false;
    //this.previousLength = this.questions.length;
   // this.moreData = this.questions.slice(0, this.limit * 6);
  }

  onMore() {
   this.isLimit = this.blogData.length - 6 * this.limit;
    this.limit += 1;
    this.getData();
    if (this.isLimit > 6) {
      this.isMore = true;
    } else {
      this.isMore = false;
    }
  }

  createBlog() {
    // if (this.isUserLoggedIn) {
    //   this.router.navigateByUrl('/blogs/add');
    // } else {
    //   this.authenticationService.showSignUp(SignupComponent, {
    //     isAgent: null,
    //     redirect: '/blogs/add',
    //     userAutoLoginAfterSignUp: true
    //   });
    // }
    this.router.navigateByUrl("/blogs/add");
  }
  get agentName() {
    return this.agentFirstName + " " + this.agentLastName;
  }

  get isUserLoggedIn() {
    return this.authService.isCurrentSession;
  }
}

标签： angulartypescriptbutton

angular - 加载更多按钮角度

问题描述

解决方案

推荐阅读