Angular 太大而无法检查的物体。打开浏览器控制台查看？

这是受到stackblitz角度应用示例的启发。我看到一个错误，特别是：

错误：对象太大，无法检查。打开浏览器控制台进行查看

当我打开stackblitz控制台和浏览器控制台时，它在chrome开发工具中指定了相同的错误

作为参考，我附上类似的复制stackblitz的例子

它的根本原因是什么？如何在stackblitz示例中避免此类错误

以下是我的HTML代码：

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
</mat-form-field>
<table
  mat-table
  [dataSource]="formdataarray.controls"
  multiTemplateDataRows
  class="mat-elevation-z8" matSort
>
  <ng-container 
    matColumnDef="{{column}}"
    *ngFor="let column of columnsToDisplay"
  >
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
    <td mat-cell *matCellDef="let element"> {{ element.value[column] }}  </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td
      mat-cell
      *matCellDef="let element"
      [attr.colspan]="columnsToDisplay.length"
    >
      <div
        class="example-element-detail"
        [@detailExpand]=" element.rowEdit == true ? 'expanded':'collapsed' "
      >
        <ng-container>
          <div class="example-element-description">
            <td class="example-element-weight">
              <ng-template pTemplate="input">
                <input
                  pInputText
                  type="text"
                  [(ngModel)]="element.testhiddencol1"
                />
              </ng-template>
              <ng-template pTemplate="output">
                {{element.testhiddencol1}}
              </ng-template>
            </td>
          </div>
        </ng-container>
        <div class="example-element-description">
          <td class="example-element-weight">{{element.description}}</td>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr
    mat-row
    *matRowDef="let element; columns: columnsToDisplay;"
    class="example-element-row"
    [class.example-expanded-row]="expandedElement === element"
    (click)="rowClicked(element)"
  ></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: ['expandedDetail']"
    class="example-detail-row"
  ></tr>
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>

滤器
{{column}}
{{element.value[列]}
{{element.testhiddencol1}}
{{element.description}
没有与筛选器“{input.value}}”匹配的数据

而my component.ts是文件：

import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";

import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

import { Table, TableService } from "primeng/table";
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { ThrowStmt } from '@angular/compiler';

/**
 * @title Table with expandable rows
 */
@Component({
  selector: "table-expandable-rows-example",
  styleUrls: ["table-expandable-rows-example.css"],
  templateUrl: "table-expandable-rows-example.html",
  providers: [
    TableService,
    {
      provide: Table,
    },
  ],
  animations: [
    trigger("detailExpand", [
      state("collapsed", style({ height: "0px", minHeight: "0" })),
      state("expanded", style({ height: "*" })),
      transition(
        "expanded <=> collapsed",
        animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")
      ),
    ]),
  ],
})
export class TableExpandableRowsExample implements AfterViewInit, OnInit {


  constructor(private fb: FormBuilder) {

  }

  formData: FormGroup = new FormGroup({});
  formdataarray: FormArray = new FormArray([]);
  dataSource = new MatTableDataSource([]);

  @ViewChild(MatSort) sort: MatSort;
  columnsToDisplay = ["rowEdit", "name", "weight", "symbol", "position", "investorName"];
  expandedElement: PeriodicElement | null;

  ngOnInit() {
    this.formData = this.fb.group({
      rowEdit: [],
      name: [],
      weight: [],
      symbol: [],
      position: [],
      investorName: []
    })

    

    for(let i =0; i<ELEMENT_DATA.length;i++){
      this.formdataarray.push(
        this.fb.group({
          rowEdit: ELEMENT_DATA[i].rowEdit,
          name: ELEMENT_DATA[i].name,
          weight: ELEMENT_DATA[i].weight,
          symbol: ELEMENT_DATA[i].symbol,
          position: ELEMENT_DATA[i].position,
          investorName: ELEMENT_DATA[i].investorName
        })
      )

    }     
  


  }

  ngAfterViewInit() {

    console.log("$$$$$$$", this.sort)

    this.dataSource.sort = this.sort;
  }
  rowClicked(row: PeriodicElement): void {
    console.log(row); 

    row.rowEdit = true;

  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    console.log(filterValue);
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  description: string;
  testhiddencol1: string;
  rowEdit: boolean;
  investorName: string;
}

const CO_MANAGER_DATA: string[] = [
  "Manager 1",
  "Manager 2",
  "Manager 3",
  "Manager 4",
];

const ELEMENT_DATA: PeriodicElement[] = [
  {
    position: 1,
    name: "Hydrogen",
    weight: 1.0079,
    symbol: "H",
    description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
        atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "abc investor"
  },
  {
    position: 2,
    name: "Helium",
    weight: 4.0026,
    symbol: "He",
    description: `Helium is a chemical element with symbol He and atomic number 2. It is a
        colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
        group in the periodic table. Its boiling point is the lowest among all the elements.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "abc investor"

  },
  {
    position: 3,
    name: "Lithium",
    weight: 6.941,
    symbol: "Li",
    description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
        silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
        lightest solid element.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "cde investor"

  },
  {
    position: 4,
    name: "Beryllium",
    weight: 9.0122,
    symbol: "Be",
    description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a
        relatively rare element in the universe, usually occurring as a product of the spallation of
        larger atomic nuclei that have collided with cosmic rays.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "fgh investor"

  },
  {
    position: 5,
    name: "Boron",
    weight: 10.811,
    symbol: "B",
    description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely
        by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
        low-abundance element in the Solar system and in the Earth's crust.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "abc investor"

  },
  {
    position: 6,
    name: "Carbon",
    weight: 12.0107,
    symbol: "C",
    description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
        and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
        to group 14 of the periodic table.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "ijk investor"

  },
  {
    position: 7,
    name: "Nitrogen",
    weight: 14.0067,
    symbol: "N",
    description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first
        discovered and isolated by Scottish physician Daniel Rutherford in 1772.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "lmn investor"

  },
  {
    position: 8,
    name: "Oxygen",
    weight: 15.9994,
    symbol: "O",
    description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
         the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
         agent that readily forms oxides with most elements as well as with other compounds.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "lm investor"

  },
  {
    position: 9,
    name: "Fluorine",
    weight: 18.9984,
    symbol: "F",
    description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the
        lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
        conditions.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "test investor"

  },
  {
    position: 10,
    name: "Neon",
    weight: 20.1797,
    symbol: "Ne",
    description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
        Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
        two-thirds the density of air.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "xyz investor"

  },
];

从“@angular/core”导入{AfterViewInit，Component，OnInit，ViewChild}；
从“@angular/material/sort”导入{MatSort}”；
从“@angular/material/table”导入{MatTableDataSource}”；
进口{
使有生气
状态
风格
过渡
触发
}从“@角度/动画”；
从“priming/Table”导入{Table，TableService}；
从'@angular/forms'导入{FormArray，FormBuilder，FormGroup}；
从'@angular/compiler'导入{ThrowStmt}；
/**
*@具有可扩展行的标题表
*/
@组成部分({
选择器：“表可扩展行示例”，
样式URL:[“表可扩展行示例.css”]，
templateUrl:“表可扩展行示例.html”，
供应商：[
表服务，
{
提供：表格，
},
],
动画：[
触发器（“detailExpand”[
状态（“折叠”，样式（{height:“0px”，minHeight:“0”}），
状态（“已展开”，样式（{height:*“}）），
过渡(
“扩展崩溃”，
动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）”）
),
]),
],
})
导出类TableExpandableRowsExample在ViewInit、OnInit之后实现{
构造函数（私有fb:FormBuilder）{
}
formData:FormGroup=newformgroup（{}）；
formdataarray:FormArray=新的FormArray（[]）；
数据源=新MatTableDataSource（[]）；
@ViewChild（MatSort）排序：MatSort；
columnsToDisplay=[“行编辑”、“名称”、“重量”、“符号”、“位置”、“投资名称”]；
expandedElement:PeriodiceElement | null；
恩戈尼尼特（）{
this.formData=this.fb.group({
行编辑：[]，
姓名：[]，
重量：[]，
符号：[]，
职位：[]，
投资者名称：[]
})
对于（让i=0；i我遇到了类似的问题，一个角度项目在本地机器上工作，但在stack_blitz上失败，错误如下：
错误：对象太大，无法检查。请打开浏览器控制台进行查看。
我自己也在等待答案。
我在本地机器上工作的angular project遇到了类似的问题，但在stack_blitz上失败，错误如下：
错误：对象太大，无法检查。请打开浏览器控制台进行查看。
我自己也在等待答案。
不知道怎么了，但请评论下面这句话

console.log("$$$$$$$", this.sort)

错误消失。
不知道哪里出了问题，但请评论下一行

console.log("$$$$$$$", this.sort)

错误消失。
说你遇到了同样的问题或者你也在期待答案不应该作为答案发布，也许一条评论会证明你遇到了同样的问题或者你也在期待答案不应该作为答案发布，也许一条评论会证明你能投赞成票吗谢谢你的更新你可以投票吗谢谢你的更新