angularfire icon indicating copy to clipboard operation
angularfire copied to clipboard

Update README.md

Open NeftaliYagua opened this issue 3 years ago • 1 comments
trafficstars

Variable con ámbito de bloque 'collection' usada antes de su declaración.ts(2448)

El tipo 'Observable<DocumentData[]>' no se puede asignar al tipo 'Observable<Item[]>'. El tipo 'DocumentData[]' no se puede asignar al tipo 'Item[]'. La propiedad "name" falta en el tipo "DocumentData", pero es obligatoria en el tipo "Item".ts(2322)

El método collection tiene el mismo nombre de la constante de manera que el compilador confunde ambos.

Checklist

  • Issue number for this PR: #nnn (required)
  • Docs included?: (yes/no; required for all API/functional changes)
  • Test units included?: (yes/no; required)
  • In a clean directory, yarn install, yarn test run successfully? (yes/no; required)

Description

Code sample

NeftaliYagua avatar Aug 21 '22 17:08 NeftaliYagua

I also got those two errors. In the page https://github.com/angular/angularfire under "Example use," this code

 const collection = collection(firestore, 'items');
 this.item$ = collectionData(collection);

throws this error

'collection' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

I fixed it by changing the constant collection to myCollection:

const myCollection = collection(firestore, 'items');
this.item$ = collectionData(myCollection);

The second error is in this code:

interface Item {
  name: string,
};

The error is:

Type 'Observable<DocumentData[]>' is not assignable to type 'Observable<Item[]>'.
Type 'DocumentData[]' is not assignable to type 'Item[]'.
Property 'name' is missing in type 'DocumentData' but required in type 'Item'.

This is easily fixed by making name optional:

interface Item {
  name?: string,
};

Here's the complete working code:

import { Component } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

interface Item {
  name?: string,
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'GreatestComputerScientists-7.4';
  item$: Observable<Item[]>;
  constructor(firestore: Firestore) {
    const myCollection = collection(firestore, 'items');
    this.item$ = collectionData(myCollection);
  }
}

I put the HTML section into app.component.html.

tdkehoe avatar Sep 09 '22 19:09 tdkehoe