Question

我有一个名为DOCUMENT的主要组件。该文档采用一个URL段，并从我的数据库中获取一个关联对象的数组。然后，在DOCUMENT VIEW组件中使用@Output() documents = new EventEmitter()和@Input()，然后使用*ngFor迭代传入的数组。整个过程都有效并且显示了元素，但是我不断收到错误消息

错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

我很困惑。由于某种原因，感觉像是打字稿类型错误。我实际上是console.log初始数据库返回，实际上，它是一个对象数组。因此，不确定此错误来自何处

---------- TS ----------

import { Component, OnInit, Output, EventEmitter } from "@angular/core";
import { DocumentService } from "src/app/services/document.service";
import { ActivatedRoute, Router, NavigationEnd } from "@angular/router";

@Component({
  selector: "app-documents",
  templateUrl: "./documents.component.html",
  styleUrls: ["./documents.component.css"]
})
export class DocumentsComponent implements OnInit {
  @Output() documents = new EventEmitter();
  department;
  navigationSubscription;

  constructor(
    private _documentService: DocumentService,
    private _route: ActivatedRoute,
    private _router: Router
  ) {
    // subscribe to the router events - storing the subscription so
    // we can unsubscribe later.
    this.navigationSubscription = this._router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        this.initialiseComponent();
      }
    });
  }

  initialiseComponent() {
    this.getDocuments();
  }
  ngOnDestroy() {
    // avoid memory leaks here by cleaning up after ourselves. If we
    // don't then we will continue to run our initialiseInvites()
    // method on every navigationEnd event.
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }

  ngOnInit() {
    this.getDocuments();
  }

  getDocuments() {
    this._route.paramMap.subscribe(params => {
      this.department = params.get("department");
    });

    this._documentService
      .getDocumentsByDepartment(this.department)
      .subscribe(response => {
        this.documents = response["documents"];
        console.log(response["documents"]);
      });
  }
}

---------相同的HTML组件-----------

<app-documents-view [docs]="documents"></app-documents-view>

------------查看组件TS ------------

import { Component, OnInit, Input } from "@angular/core";
import { DocumentService } from "src/app/services/document.service";
import { saveAs } from "file-saver";
import { faEye, faDownload } from "@fortawesome/free-solid-svg-icons";

@Component({
  selector: "app-documents-view",
  templateUrl: "./documents-view.component.html",
  styleUrls: ["./documents-view.component.css"]
})
export class DocumentsViewComponent implements OnInit {
  // ICONS
  faEye = faEye;
  faDownload = faDownload;

  @Input() docs; // loaded with documents from parent component (@Output())
  showDocumentListing = true;
  showFileViewer = false;
  fileUrl; // Used to set the view document viwer (ngx-viewer)

  constructor(private _documentService: DocumentService) {}

  ngOnInit() {}

  viewDocument(id) {
    this._documentService.getDocument(id).subscribe(response => {
      this.fileUrl = response["documentUrl"];
      this.showDocumentListing = false;
      this.showFileViewer = true;
    });
  }

  downloadDocument(id) {
    this._documentService.getDocument(id).subscribe(response => {
      saveAs(response["documentUrl"], response["documentKey"]);
    });
  }

  closeDocumentView() {
    this.showFileViewer = false;
    this.showDocumentListing = true;
  }
}

----------查看组件HTML ------------

<div class="card" *ngIf="docs && showDocumentListing">
  <div class="card-header bg-light text-primary">
    <h3>Documents</h3>
  </div>
  <div class="card-body border border-light">
    <div class="table-responsive mt-3">
      <table class="table">
        <thead>
          <th>Filename</th>
          <th>Description</th>
          <th>Action</th>
        </thead>
        <tbody>
          <tr *ngFor="let doc of docs">
            <td>{{ doc?.key }}</td>
            <td>{{ doc?.description }}</td>
            <td>
              <button class="btn btn-primary mr-1" (click)="viewDocument(doc._id)">
                <fa-icon [icon]="faEye"></fa-icon>
              </button>
              <button class="btn btn-primary" (click)="downloadDocument(doc._id)">
                <fa-icon [icon]="faDownload"></fa-icon>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

您的问题是将response["documents"]分配给@Output是错误的。此处您不需要@Output，则应将检索到的文档分配给documents然后发送到 app-documents-view作为波普尔。

在您的DocumentsComponent中删除以下行

@Output() documents = new EventEmitter();

并使用此

public document: any;

相反。

Answer 2

第@Output() documents = new EventEmitter();行有问题。

您只需要将prop传递给子组件。您不需要它，它用于将某些事件从子级传递到父级。这里发生的是，第一个渲染发生在具有文档属性的Event Emitter对象上，导致此* ngFor错误，并且在您获得响应后，它在第二个渲染中运行正常。

您可以删除此文档的属性分配，它应该可以正常工作。

角度ngFor绑定错误。为什么会出现错误？

2 个答案: