Ionic 无效误差：没有httpclient的提供程序！没有app. modul.ts

laik7k3q 于 2023-04-27 发布在 Ionic

关注(0)|答案(2)|浏览(162)

我试图用HttpClient在Ionic Angular中读取JSON，但我得到了这个错误“nullinjectorerror：没有httpclient的提供程序！"。
问题是angular的最新版本没有生成app. module. ts。
我的代码：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs';

@Component({
  selector: 'app-ficha-evento',
  templateUrl: './ficha-evento.page.html',
  styleUrls: ['./ficha-evento.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule]
})
export class FichaEventoPage implements OnInit {

  event:any=[];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getEvnt().subscribe(res=>{
      /*console.log("res",res);*/
      this.event=res;
    });
  }
  
  getEvnt(){
    return this.http
    .get('assets/eventos.json')
    .pipe(
      map((res:any)=>{
        return res.data;
      })
    )
  }

}

有想法吗？谢谢！！！
我尝试在page.module.ts中导入HttpClientModule，但不起作用。我还尝试手动生成appModule...也不起作用。
现在我正在寻找其他访问JSON文件的方法...

ionic-framework

来源：https://stackoverflow.com/questions/76061626/nullinjectorerror-no-provider-for-httpclient-without-app-module-ts

2条答案

按热度按时间

3htmauhk1#

要在独立应用程序中提供HttpClient，我们可以这样做

main.ts

import {provideHttpClient} from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
})

赞(0）回复(0）举报 2023-04-27

2wnc66cl2#

项目的根目录中应该只有httpClientModule
那么你应该使用一个服务类来调用可以像这样实现的API
我想指出的是，如果你使用经典的模块风格的应用程序
component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-ficha-evento',
  templateUrl: './ficha-evento.page.html',
  styleUrls: ['./ficha-evento.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule]
})
export class FichaEventoPage {
  events$ = this.eventService.getEvents();

  constructor(private eventService: EventService) {}
}

component.html

<div>{{ events$ | async }}</div>

<!-- for seeing object content (For debugging) -->
<pre>{{ events$ | async | json }}</pre>

event.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, take } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventService {
  constructor(private http: HttpClient) {}
  
  getEvents() {
    return this.http
    .get('/assets/eventos.json')
    .pipe(
      take(1),
      map((res:any)=>{
        return res.data;
      })
    )
  }
}

赞(0）回复(0）举报 2023-04-27

我来回答

Ionic 无效误差：没有httpclient的提供程序！没有app. modul.ts

2条答案

相关问题

热门标签

最新问答