angular - Načítanie poľa objektu z observable pomocou async pipe

Chcem získať lepšie pochopenie toho, kedy používať async pipe v Angulari.

Milujem myšlienku mať dáta, ktoré sa objavujú asynchrónne vo výhľade, jednoducho pridaním potrubia, ktoré sa prihlási na odber dát.

Avšak, doteraz som videl a správne použil async pipe iba na sieťovú požiadavku alebo nejaký iný vlastný observable, ktorý obsahuje buď pole údajov, alebo jedno pole (napríklad observable reťazec).

Napríklad:

Povedzme, že vykonám volanie API, ktoré vráti pole vysokoškolských študentov.

// This data is within a network response
$students = ...get...map... 
[
  {
    name: "Bob OConnel",
    id: 0,
    description: "young..."
  },
  {
    name: "Rick Luckard",
    id: 3,
    description: "young..."
  },
  {
    name: "James Wing",
    id: 2,
    description: "young..."
  }
]

Toto by sa dalo zobraziť v šablóne takto:

<tr *ngFor="let student of $students | async">
  <td>{{student.id}}</td>
  <td>{{student.name}}</td>
  <td>{{student.description}}</td>
</tr>

Avšak vzhľadom na starú filozofiu REST API, ešte som nikdy neurobil produkčné API volanie, ktoré by vracalo len pole dát. Vždy sú tam aj polia na rovnakej úrovni ako pole dát. Ale sú tam z nejakého dôvodu, nechcem tieto extra polia jednoducho vyhodiť v mapovaní.

Takže namiesto toho, aby $students bolo poľom, by sa to stalo:

// This data is within a network response
$students = ...get...map... 
{
  id: "69asdkasdkljasd6969"
  href: "someURLrepresentingTheDatasOrigins"
  length: 3
  items: [
    {
      name: "Bob OConnel",
      id: 0,
      description: "young..."
    },
    {
      name: "Rick Luckard",
      id: 3,
      description: "young..."
    },
    {
      name: "James Wing",
      id: 2,
      description: "young..."
    }
  ]
}

Takže to znamená, že v šablóne môžem použiť async pipe na $students observable, ale nie na poliach v ňom.

To očividne nefunguje, pretože polia v rámci observables sú observables:

{{$students.id| async}}
// or
<tr *ngFor="let student of $students.items | async">...</tr>

Takže to znamená, že na sieťových odpovediach ako táto by som mal hodnoty odpovede mapovať do vlastných jednotlivých observables, ak ich chcem asynchrónne viazať v šablóne? Existuje nejaký spôsob, ako sa tomu vyhnúť, ak nechcem, aby sa sieťová odpoveď rozdelila na milión menších objektov (alebo v prípade môjho príkladu: {id, length, href} a {items})?

Mám pocit, akoby mi niečo zrejmé ohľadom používania observables unikalo, čo by mi túto otázku objasnilo. Dajte mi vedieť, ak moja otázka nie je dostatočne jasná.

AKTUALIZÁCIA Našiel som niečo, čo som nevedel, že tu môžem robiť: https://toddmotto.com/angular-ngif-async-pipe

Veľmi užitočné pre situácie, kde by mal byť na mieste asynchrónnych dát nejaký indikátor načítania. Funguje to tiež na zhrnutie viacerých odberov do jedného miesta. To by bola otázka preferencie, ale myslím si, že v mnohých mojich situáciách by som radšej vložil odber do *ngIf.

Pokiaľ to nemôžeš urobiť tú istú logiku šablóny else do *ngFor..?

Odpoveď č. 1

Nemusíte mapovať hodnoty do vlastného jednotlivého observablu. Namiesto toho môžete jednoducho obaliť svoj observable do zátvoriek spolu s async pipe a potom pristupovať k poliam vo vnútri objektu vráteného observablom.

Skúsiť:

<tr *ngFor="let student of ($students | async).items">
  <td>{{student.id}}</td>
  <td>{{student.name}}</td>
  <td>{{student.description}}</td>
</tr>

Súvisiace články