Angular/TypeScript treats array as object and throws an Error: Cannot find a differ supporting object

Question

我的组件中的代码如下，我定义了这个：

public outputFormats =  ["pdf", "png32", "png8", "jpg", "gif", "eps", "svg"];

在我的模板中：

  <div ngbDropdownMenu aria-labelledby="polylineStyleDropdown">
     <button class="dropdown-item" *ngFor="let format of outputFormats"
         (click)="onOutputFormatChanged(format)">{{format}}
     </button>
  </div>

但是我在初始化时收到以下错误。

  ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
      at NgForOf.ngDoCheck (common.js:3323:1)
      at callHook (core.js:2536:1)
      at callHooks (core.js:2495:1)
      at executeInitAndCheckHooks (core.js:2446:1)
      at selectIndexInternal (core.js:8447:1)
      at Module.ɵɵadvance (core.js:8430:1)
      at PrintComponent_Template (print.component.html:41:48)
      at executeTemplate (core.js:9598:1)
      at refreshView (core.js:9464:1)
      at refreshComponent (core.js:10635:1)
  defaultErrorLogger @ core.js:6479
  handleError @ core.js:6527
  (anonymous) @ core.js:29723
  invoke @ zone.js:372
  run @ zone.js:134
  runOutsideAngular @ core.js:28604
  tick @ core.js:29723
  (anonymous) @ core.js:29571
  invoke @ zone.js:372
  onInvoke @ core.js:28705
  invoke @ zone.js:371
  run @ zone.js:134
  run @ core.js:28559
  next @ core.js:29570
  __tryOrUnsub @ Subscriber.js:183
  next @ Subscriber.js:122
  _next @ Subscriber.js:72
  next @ Subscriber.js:49
  next @ Subject.js:39
  emit @ core.js:25968
  checkStable @ core.js:28627
  onLeave @ core.js:28755
  onInvokeTask @ core.js:28699
  invokeTask @ zone.js:405
  runTask @ zone.js:178
  invokeTask @ zone.js:487
  invokeTask @ zone.js:1600
  globalZoneAwareCallback @ zone.js:1626

当我做 console.log(typeof this.outputFormats) 时，它 returns 反对。我尝试使用 Array.from(this.outputFormats)、Object.values(this.outputFormats) 将其转换为数组，但结果仍然相同，输出仍然是一个对象。

版本： Angular 客户端 12.1.4 打字稿 4.3.5

对我不起作用的解决方案：

https://github.com/angular/angular/issues/6392

Angular error : Cannot find a differ supporting object '[object Object]'

Answer 1

我已经修改了文档示例的一个版本以使用您共享的内容，并且它在 https://stackblitz.com/edit/angular-3pnr1l 与您指定的 TS/Angular 版本一起工作。它的价值是 ng-bootstrap 11.0，但你没有指定它。

实现中的一个区别是使用 <Button ngbDropdownItem。

# dropdown-basic.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdDropdownBasic } from './dropdown-basic';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdDropdownBasic],
  exports: [NgbdDropdownBasic],
  bootstrap: [NgbdDropdownBasic]
})
export class NgbdDropdownBasicModule {}

# dropdown-basic.ts
import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {
  public outputFormats =  ["pdf", "png32", "png8", "jpg", "gif", "eps", "svg"];
}

# dropdown-basic.html
<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
    Toggle dropdown
  </button>
  <div ngbDropdownMenu aria-labelledby="polylineStyleDropdown">
    <button
      ngbDropdownItem
      class="dropdown-item"
      *ngFor="let format of outputFormats"
    >
      {{format}}
    </button>
  </div>
</div>

如果此确切设置对您不起作用，则此错误可能是个转移注意力的错误，您可能会忙于找出导致它崩溃的确切原因。我们对您周围的代码没有足够的洞察力来真正诊断这一点。希望您能发现与此示例明显不同的内容。

Answer 2

问题与问题中的代码无关。我在将枚举分配给名为 printModes 的属性时犯了一个错误，然后我在模板的另一个 ngFor 中使用了属性。错误：

enum PrintModes {
  CurrentView = 'Current View',
  AdjustableBox = 'Adjustable Box',
  DrawnBoundary = 'Drawn Boundary'
}

然后组件内部：

public printModes = PrintModes

在模板中：

     <div ngbDropdown class="d-block print-area-cont">
        <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>
          {{printMode}}
        </button>
        <div ngbDropdownMenu aria-labelledby="polylineStyleDropdown">
          <button class="dropdown-item" *ngFor="let area of printModes"
                  (click)="onPrintAreaChanged(area)">{{area}}
          </button>
        </div>
      </div>

分叉 stackblitz 中的错误是正确的并且与错误相关，但在我的应用程序中，它没有显示原始错误。不知何故，原始错误使打字稿行为不端。

Stackblitz 错误：

Error in src/app/dropdown-basic.html (7:54)
Type 'typeof PrintModes' is not assignable to type 'NgIterable<any>'.
Type 'typeof PrintModes' is not assignable to type 'Iterable<any>'.

要解决这个问题，我只需要在组件内部进行更改

public printModes = PrintModes;

到

public printModes = Object.values(PrintModes);

Angular/TypeScript treats array as object and throws an Error: Cannot find a differ supporting object

Angular/TypeScript treats array as object and throws an Error: Cannot find a differ supporting object

angular

typescript

angular12

typescript4.0