【问题标题】:Type 'import("c:/Users/hp/Desktop/Angular/gametask1/src/app/models/Event").Event[]' is not assignable to type 'Event[]'类型 'import("c:/Users/hp/Desktop/Angular/gametask1/src/app/models/Event").Event[]' 不可分配给类型 'Event[]'
【发布时间】:2020-07-29 09:25:49
【问题描述】:

当我尝试将 firebase 获取的事件存储在参数中时,我的组件文件中出现以下错误。参数已正确获取,但我无法存储它们。我应该做些什么来运行代码?:-

Type 'import("c:/Users/hp/Desktop/Angular/gametask1/src/app/models/Event").Event[]' is not assignable to type 'Event[]'.
Type 'Event' is missing the following properties from type 'Event': bubbles, cancelBubble, cancelable, composed, and 18 more.

Event.ts:-

export interface Event {
    id: string;
    code: string;
    name: string;
    password: string;
    pollCat: string;
}

events.service.ts:-

import { Injectable } from '@angular/core';
import { AngularFirestore , AngularFirestoreCollection, AngularFirestoreDocument} from 'angularfire2/firestore';
import { Event } from '../models/Event';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class EventsService {

  eventsCollection : AngularFirestoreCollection<Event>;
  events: Observable<Event[]>;

  constructor(public afs: AngularFirestore) { 
    this.events = this.afs.collection<Event>('Events').valueChanges();
  }

  getEvents()
  {
    return this.events;
  }
}

events.component.ts:-

import { Component, OnInit } from '@angular/core';
import { EventsService } from 'src/app/services/events.service';

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {

  events: Event[];

  constructor(public eventsService: EventsService) { }

  ngOnInit() {
    this.eventsService.getEvents().subscribe(events => {
      this.events = events;
    });
  }
}

【问题讨论】:

    标签: angular firebase rxjs observablecollection angular9


    【解决方案1】:

    您没有将正确的Event 接口导入到您的组件中。

    将此行添加到您的events.component.ts

    import { Event } from '../models/Event';
    

    它可以编译是因为 Event 也是一个全局接口,但它不是您想要使用的接口。

    如果您不希望出现这些“冲突”,请为您的接口使用不同的名称。

    【讨论】:

      猜你喜欢
      • 2019-06-29
      • 1970-01-01
      • 2020-07-28
      • 2019-07-14
      • 2020-04-26
      • 2020-07-29
      • 2022-06-13
      • 2019-01-29
      • 1970-01-01
      相关资源
      最近更新 更多