Javascript 错误类型错误：无法读取属性'；0'；零度|角7

我试图访问component.html中的Observable，如下所示：

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

我不知道是否可以这样做，但我想访问html中可观察列表的单个部分，而不使用*ngFor循环。（我正在与firebase合作。） 下面是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() }))
  )
);

它对第一项有效，但其他项无效，并显示此错误：

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)

---

谢谢你的帮助

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

因此，您的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>

component.ts

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

      constructor(...) { }

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

    }

或使用：

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

{{pin.state}}

您是否添加了

*ngIf=“pins”

？。在使用

ping

之前。我现在尝试过，但仍然存在相同的错误。您可以创建最小

https://stackblitz.com/

（未连接到我的firebase）检查更新的应答Observable{u isScalar:false，source:Observable，operator:MapOperator}仍然不工作。。。这里是stackblitz：这个答案是有效的，但它是不可见的，所以我不会实时得到更新。我找到了解决这个问题的方法，但这只是因为数据库的这一部分是静态的，键从0到7。我列出了可观察的列表：

pins:Observable[]=newarray（）

for（var i=0；i<8；i++）{this.pin[i]=this.db.object（'pins/'+i）.valueChanges（）；}

感谢您的帮助，stackblitz.com/edit/angular-1oon89OK没有Firebase连接，您能提供吗？@TimotejSofijanović在添加检索对象时不使用它：检查这里：

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

      constructor(...) { }

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

    }

{{ pins[0].state }}

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