Блог

Главная - Вопросы по программированию - как я могу добавить загрузчик, пока angular загружает данные json

как я могу добавить загрузчик, пока angular загружает данные json

#json #angular #spinner #loader

#json #angular #счетчик #загрузчик

Вопрос:

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

Я использую ionic cli для создания ленты мобильных приложений по данным json

     import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-articlespage',
  templateUrl: './articlespage.page.html',
  styleUrls: ['./articlespage.page.scss'],
})
export class ArticlespagePage implements OnInit {


    //id : any[];
    title : any[];
    author : any[];
    date : any[];
    content : any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getRemoteData().subscribe(data => {
      console.log("Remote Data:"   JSON.stringify(data));
      //console.log(data);
      this.parseJson(data);
    });
  }

  parseJson(data)
  {
     let jsonArray = data;

    //this.id = [];
    this.title = [];
    this.author = [];
    this.date = [];
    this.content = [];

    for(let i=0; i< jsonArray.length ; i  )
    {
       let jsonObject = jsonArray[i];
       //this.id.push(jsonObject.id);
       this.title.push(jsonObject.title);
       this.author.push(jsonObject.author.name);
       this.date.push(jsonObject.created_at );
       this.content.push(jsonObject.blog_entry );

    }
  }



}

HTML:

   <ion-content fullscreen>
     <h2 > Articles </h2>
      <ion-card class="feedspotcard-1 box" *ngFor=" let item of title; let i = index;">
        <ion-card-content>
            <div class="box-shadow">
              <div class="coolbar"></div>
              <!-- <p> <span> Id : </span> <span innerHTML={{id[i]}}> </span> </p> -->
              <h4> <span innerHTML={{title[i]}}> </span> </h4>
              <p>  <span innerHTML={{content[i]}}> </span> </p>
              <p> <span> author : </span> <span innerHTML={{author[i]}}> </span> </p>
              <p> <span> date : </span> <span innerHTML={{date[i]}}> </span> </p>
            </div>
        </ion-card-content>
      </ion-card>
    </ion-content>

не обязательно, но результат:

введите описание изображения здесь

Ответ №1:

вам нужно свойство, которое отслеживает состояние запроса. т.е. loadingData: boolean .

в вашем компоненте вам нужно будет установить это значение в начале запроса и после его завершения.

 ngOnInit(): void {
  this.loading = true;
  this.dataService.getRemoteData().subscribe(data => {
    // set the status of loading to false so the template can update
    this.loading =f alse;
    console.log("Remote Data:"   JSON.stringify(data));
    //console.log(data);
    this.parseJson(data);
  });
}

наконец, в шаблоне добавьте элемент, который отображается на основе значения loading свойства.

 <div *ngIf="loading"><!-- Insert your progress message/animation --> </div>

Комментарии:

1. кажется, это работает нормально, пока я не перезагружу сервер, я получаю эту ошибку: ОШИБКА в src/ app/articlespage/articlespage.page.ts: 21:10 — ошибка TS2339: свойство ‘loading’ не существует для типа ‘ArticlespagePage’. 21 this.loading = true; ~~~~~~~ src/app/articlespage/articlespage.page.ts:24:10 — ошибка TS2339: свойство ‘loading’ не существует для типа ‘ArticlespagePage’. 24 this.loading = false;

2. Хорошо, я исправил эту проблему, изменив значение loading = «true» в скрипте для модуля nd: экспортный класс ArticlespagePage реализует OnInit { loading = true;

3. это означает, что свойство не было объявлено в классе. перед constructor() {} добавлением, если вы добавите loading: boolean = false; это, свойство будет доступно при инициализации компонента. и вам не нужно повторно инициализировать его в OnInit.

Ответ №2:

Вы можете использовать ngx-spinner в качестве загрузчика. Это работает следующим образом.

В первую очередь импортируйте NgxSpinnerModule в корневой модуль (AppModule)

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";
 
@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Добавьте NgxSpinnerService сервис везде, где вы хотите использовать ngx-счетчик

  import { NgxSpinnerService } from "ngx-spinner";
     
    class AppComponent implements OnInit {
      constructor(private spinner: NgxSpinnerService) {}
     
      ngOnInit() {
        /** spinner starts on init */
        this.spinner.show();
     
        setTimeout(() => {
          /** spinner ends after 5 seconds */
          this.spinner.hide();
        }, 5000);
      }
    }

Используйте в своем шаблоне.

  <ngx-spinner></ngx-spinner>