Как я могу выполнить функцию с параметрами при загрузке страницы

Question

Я хочу отобразить текст «Подписан», если пользователь подписан, и «Подписаться», если он не подписан.Для этого я вызываю из серверной части сервис, который предоставляет мне объект, если он подписан, и выдает ошибку, не найденную, если он не подписан.Теперь, как я могу изменить отображаемый текст независимо от того, подписан он или нет.

Я работаю над Angular 7.

 import { Component, OnInit } from '@angular/core';
import { CategoryService } from '@ikubinfo/core/services/category.service';
import { Router } from '@angular/router';

@Component({
  selector: 'ikubinfo-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})


export class DashboardComponent implements OnInit {
  categories: Object;
  text: string;

  constructor(private categoryService: CategoryService, private router: Router) { 
    this.categories=[];
    this.text='';
  }

  ngOnInit() {
    this.categoryService.getAllCategories().subscribe(res=>{
      this.categories=res;
      console.log(this.categories);
    });
  }

 subscribe(id: number){
   this.categoryService.subscribe(id).subscribe(res=>{
   });
 }

 isSubscribed(id:number){
 return this.categoryService.isSubscribed(id).subscribe(res=>{
   this.text='Subscribed';
  },err=>{
    this.text='Subscribe';
  });
}
}

И HTML

<div class="row">

  <div class="col col-xl-6 col-lg-12" *ngFor="let category of categories">
    <ikubinfo-panel header="Category">
      <div panel-content ng-onload="isSubscribed(category.categoryId)">
        <h1>{{ category.categoryName }}</h1>
        <p>{{ category.categoryDescription }}</p>
        <button class="btn btn-success" (click)="subscribe(category.categoryId)">{{ text }}</button>
      </div>
    </ikubinfo-panel>
  </div> 


</div>

Answer 1

Вы должны изменить свой метод isSubscribeed () следующим образом:

isSubscribed(id:number) {    

    return this.categoryService.isSubscribed(id)
               .pipe(
                 //this will map your response to 'Subscribed' text
                 map(res => 'Subscribed'),
                 //this map error to 'NotSubscribed
                 catchError(error => 'Not Subscribed')
               );
  }

Теперь давайте изменим шаблон следующим образом:

<div class="row">

  <div class="col col-xl-6 col-lg-12" *ngFor="let category of categories">
    <ikubinfo-panel header="Category">
      <div panel-content>
        <h1>{{ category.categoryName }}</h1>
        <p>{{ category.categoryDescription }}</p>
        <button class="btn btn-success" (click)="subscribe(category.categoryId)">{{ isSubscribed(category.categoryId) | async}}</button>
      </div>
    </ikubinfo-panel>
  </div> 


</div>

Хотя я предоставил решение каксогласно вашему текущему коду.Существует множество возможностей для улучшения кода.Вы должны избегать использования вызовов функций в шаблоне в привязках [кроме действий пользователя, т. Е. Нажатия кнопки].Также вы можете избежать .subscribe () в вашем классе компонентов, используя async pipe [https://blog.angularindepth.com/tiny-angular-pipe-to-make-any-function-memoizable-f6c8fa917f2f]

Answer 2

Имейте дополнительное свойство isSubscribeed в модели категории,

export interface Category {
   ... // other existing properties
   isSubscribed: boolean = false; // initializing to false by default for error case
}

В файле * .ts,

ngOnInit() {
    this.categoryService.getAllCategories().subscribe(res=>{
      this.categories=res;
      this.categories.forEach((category) => {
           this.categoryService.isSubscribed(id).subscribe(res=>{
             category.isSubscribed = true;
           });
        });
    });
}

В файле * .html отобразите текст на основеэто свойство.

<!-- It is better to disable the button if it is subscribed-->
<button class="btn btn-success" (click)="subscribe(category.categoryId)">{{ category.isSubscribed?'Subscribed':'Subscribe'}}</button>

Кроме того, я бы порекомендовал получить флаг подписки при первоначальном запросе получения всех категорий.