错误 TS2339：类型“”上不存在属性“contenido”

Posted 2023-02-23

【中文标题】错误 TS2339：类型“”上不存在属性“contenido”

【英文标题】：error TS2339: Property 'contenido' does not exist on type ''错误 TS2339：类型“”上不存在属性“contenido”

【发布时间】：2019-01-21 22:38:01

【问题描述】：

我在其 firestore 数据库中使用 angular 6 和 firebase 做一个 crud，我正在通过一个表单编辑一些数据，应用程序应该可以工作，但编译器给了我这个错误：

ERROR in src/app/Components/Posts/dashboard-posts/dashboard-posts.component.ts(113,37): error TS2339: Property 'titulo' does not exist on type ''.
src/app/Components/Posts/dashboard-posts/dashboard-posts.component.ts(114,40): error TS2339: Property 'contenido' does not exist on type ''.
src/app/Components/Posts/dashboard-posts/dashboard-posts.component.ts(115,39): error TS2339: Property 'estracto' does not exist on type ''.
src/app/Components/Posts/dashboard-posts/dashboard-posts.component.ts(116,40): error TS2339: Property 'url_image' does not exist on type ''.

我有一个服务和一个组件正在处理这个问题，那么我将把它们都留下：

服务：

import  Injectable  from '@angular/core';
import  AngularFirestore, AngularFirestoreDocument  from 'angularfire2/firestore';
import  Observable  from 'rxjs';


@Injectable(
  providedIn: 'root'
)
export class FirestoreService 
  // Posts
  constructor(
    private firestore: AngularFirestore
  )  
  //Crea un nuevo post
  public createPost(data:  titulo: string, contenido: string, estracto: string, url_image: string ) 
    return this.firestore.collection('posts').add(data);
  

  //Obtiene un post
  public getPost(documentId: string) 
    return this.firestore.collection('posts').doc(documentId).snapshotChanges();
  

  //Obtiene todos los posts
  public getPosts() 
    return this.firestore.collection('posts').snapshotChanges();
  

  //Actualiza un post
  public updatePost(documentId: string, data:  titulo?: string, contenido?: string, estracto?: string, url_image?: string ) 

    return this.firestore.collection('posts').doc(documentId).set(data);
  

  //Borra un post
  public deletePost(documentId: string) 
    return this.firestore.collection('posts').doc(documentId).delete();
  

这里是组件：

import  Component, OnInit  from '@angular/core';
import  FirestoreService  from '../../../Service/firestore.service';
import  Form, FormControl, FormGroup, Validators  from '@angular/forms';
import  AngularFirestoreCollection  from 'angularfire2/firestore';
import  Observable  from 'rxjs';
import swal from 'sweetalert';

export interface Post 

  id: string;
  titulo: string;
  contenido: string;
  estracto: string;
  url_image: string;



@Component(
  selector: 'app-dashboard-posts',
  templateUrl: './dashboard-posts.component.html',
  styleUrls: ['./dashboard-posts.component.scss']
)
export class DashboardPostsComponent implements OnInit 

  public posts = [];
  public currentStatus = 1;
  public newPostForm = new FormGroup(
    titulo: new FormControl('', Validators.required),
    contenido: new FormControl('', Validators.required),
    estracto: new FormControl('', Validators.required),
    url_image: new FormControl('', Validators.required),
    id: new FormControl('')
  );


  constructor(
    private firestoreService: FirestoreService
  ) 
    this.newPostForm.setValue(
      id: '',
      titulo: '',
      contenido: '',
      estracto: '',
      url_image: ''
    );
  

  postsCollections: AngularFirestoreCollection<Post>;
  postsObservable: Observable<Post[]>;

  ngOnInit() 
    this.firestoreService.getPosts().subscribe((postsSnapshot) => 
      this.posts = [];
      postsSnapshot.forEach((postData: any) => 
        this.posts.push(
          id: postData.payload.doc.id,
          data: postData.payload.doc.data()
        );
      )
    );
  

  public newPost(form, documentId = null) 
    if (this.currentStatus == 1) 
      let data = 
        titulo: form.titulo,
        contenido: form.contenido,
        estracto: form.estracto,
        url_image: form.url_image
      
      this.firestoreService.createPost(data).then(() => 
        swal("Listo!", "Tu post ha sido creado extitosamente!", "success");
        this.newPostForm.setValue(
          titulo: '',
          contenido: '',
          estracto: '',
          url_image: '',
          id: ''
        );
      , (error) => 
        console.error(error);
      );
     else 
      let data = 
        titulo: form.titulo,
        contenido: form.contenido,
        estracto: form.estracto,
        url_image: form.url_image
      
      this.firestoreService.updatePost(form.id, form).then(() => 
        this.currentStatus = 1;
        this.newPostForm.setValue(
          titulo: '',
          contenido: '',
          estracto: '',
          url_image: '',
          id: ''
        );
        console.log('Documento editado exitósamente');
      , (error) => 
        console.log(error);
      );
    
  

  public editPost(documentId) 
    this.firestoreService.getPost(documentId).subscribe((post) => 
      this.currentStatus = 2;

      this.newPostForm.setValue(

        id: documentId,
        titulo: post.payload.data().titulo, //Aqui me da el error
        contenido: post.payload.data().contenido, //Aqui me da el error
        estracto: post.payload.data().estracto, //Aqui me da el error
        url_image: post.payload.data().url_image //Aqui me da el error
      );
    );
  



  public deletePost(documentId) 
    this.firestoreService.deletePost(documentId).then(() => 
      console.log('Documento eliminado!');
    , (error) => 
      console.error(error);
    );
  

希望你能帮助我。

【参考方案1】：

您必须指定文档的类型，否则 TypeScript 默认为空类型。将以下内容添加到服务中（根据需要进行更改）：

export interface Post 
    titulo: string;
    contenido: string;
    estracto: string;
    url_image: string;

然后将getPost改成如下：

  //Obtiene un post
  public getPost(documentId: string) 
    return this.firestore.collection('posts').doc<Post>(documentId).snapshotChanges();
    //                                           ^^^^^^