错误类型错误：无法读取 null 的属性“0”|角 7答案

【问题标题】：ERROR TypeError: Cannot read property '0' of null | Angular 7错误类型错误：无法读取 null 的属性“0”|角 7
【发布时间】：2019-05-27 21:41:54
【问题描述】：

我正在尝试像这样访问 component.html 中的 Observable：

{{ (pins | async)[0]?.state }}

我不知道是否可以这样做，但我想访问 html 中的 Observable 列表的单个部分而不用 *ngFor 循环。（我正在使用火力基地。）这是component.ts：

pins: Observable<any[]>;

this.pins = this.db.list('pins').snapshotChanges().pipe(
  map(changes => 
    changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
  )
);

这是引脚的json数据：

[
  {
    "$key": "0",
    "pin": 5,
    "state": true
  },
  {
    "$key": "1",
    "pin": 4,
    "state": false
  },
  {
    "$key": "2",
    "pin": 0,
    "state": true
  },
  {
    "$key": "3",
    "pin": 2,
    "state": false
  },
  {
    "$key": "4",
    "pin": 14,
    "state": true
  },
  {
    "$key": "5",
    "pin": 12,
    "state": true
  },
  {
    "$key": "6",
    "pin": 13,
    "state": true
  },
  {
    "$key": "7",
    "pin": 15,
    "state": true
  }
]

它适用于第一个项目，但其他项目不工作，并显示此错误：

ERROR TypeError: Cannot read property '0' of null
    at Object.eval [as updateRenderer] (HomeComponent.html:88)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:22503)
    at checkAndUpdateView (core.js:21878)
    at callViewAction (core.js:22114)
    at execComponentViewsAction (core.js:22056)
    at checkAndUpdateView (core.js:21879)
    at callViewAction (core.js:22114)
    at execEmbeddedViewsAction (core.js:22077)
    at checkAndUpdateView (core.js:21874)
    at callViewAction (core.js:22114)

感谢您的帮助！

【问题讨论】：

你加*ngIf="pins"了吗？使用前ping.
我现在试过了，但还是一样的错误
你能创建最小的https://stackblitz.com/
stackblitz.com/edit/angular-1uon89（未连接到我的 Firebase）
检查更新的答案

标签： javascript json angular typescript firebase

【解决方案1】：

尝试先检查变量的长度，然后使用索引位置从列表中获取指定项：

所以你的 HTML 喜欢：

<ul *ngFor="let pin of pins;let i=index">
    <li>{{ pin.state }} <button mat-button (click)="update(i,pin)">Update Status</button></li>
</ul>
<span *ngIf="pins">
   {{ pins[0].state }} and {{pins.length}}
</span>

在 TS 中：

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pins: any;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    this.db.list('pins').valueChanges().subscribe(value => {
      this.pins = value;
    });
  }
  update(i,pin)
  {
   this.db.object('/pins/' + i).update({ pin: pin.pin, state: !pin.state });
  }
}

WORKING EXAMPLE

【讨论】：

Observable {_isScalar: false, source: Observable, operator: MapOperator}
还是不行...这里是stackblitz：stackblitz.com/edit/angular-1uon89
这个答案有效，但它不是可观察的，所以我没有实时获得更新。我找到了解决这个问题的方法，但这只是因为这部分数据库是静态的，并且键从 0 到 7。我列出了 Observables：pins: Observable<any>[] = new Array();for(var i = 0; i < 8; i++) { this.pin[i] = this.db.object('pins/' + i).valueChanges(); } 感谢您的帮助，stackblitz.com/edit/angular-1uon89
好的，没有 Firebase 连接，你能提供吗？
@TimotejSofijanović 不，当它被添加时它的检索对象：在这里查看：stackblitz.com/edit/angular-ba1xyz

【解决方案2】：

组件.ts

export class AppComponent {
      pins: Observable<any[]>;
      pinsList = [];

      constructor(...) { }

      ngOnInit() {
       ...
       pins..subscribe(pins => this.pinsList = pins);
      }

    }

component.html

{{ pins[0].state }}

或使用：

<ng-container *ngFor="let pin of pins | async; let i = index;">
 <div  *ngIf="i === 0">{{ pin.state }}</div>
</ng-container>

【讨论】：