Question

基本上我正在尝试创建 gui 以便于文件编辑。

我有一个这样的数组:(键是动态的，所以数组不使用模板，我可以参考它的内容。）

console.log output here for the array

当我试图循环时，它会给我一个错误：

无法读取未定义的属性“日期”

multiarray.component.html 中此行发生错误：

<ng-template [ngIf]="getType(configFile[key][sub]) === 'multiarray'">
  <multiarray-component [key]="sub" [configFile]="configFile" [value]="configFile[key][sub]" [descriptions]=""></multiarray-component>
</ng-template>

代码： multiarray.component.html

<div class="col-md-12">
  <h4>{{key}}</h4>

  <div class="row">

    <ng-template [ngIf]="getType(value) !== 'multiarray'">
      <ng-template [ngIf]="getType(configFile[key]) === 'text' || getType(configFile[key]) === 'number'">
        <input-component [key]="key" [value]="configFile[key]" [descriptions]=""></input-component>
      </ng-template>

      <ng-template [ngIf]="getType(configFile[key]) === 'boolean'">
        <checkbox-component [key]="key" [value]="configFile[key]" [descriptions]=""></checkbox-component>
      </ng-template>

      <ng-template [ngIf]="getType(configFile[key]) === 'array'">
        <array-component [key]="key" [value]="configFile[key]" [descriptions]=""></array-component>
      </ng-template>
    </ng-template>

    <ng-template [ngIf]="getType(value) === 'multiarray'">
      <div *ngFor="let sub of getKeys(value)">

        <ng-template [ngIf]="getType(configFile[key][sub]) === 'multiarray'">
          <multiarray-component [key]="sub" [configFile]="configFile" [value]="configFile[key][sub]" [descriptions]=""></multiarray-component>
        </ng-template>

        <ng-template [ngIf]="getType(configFile[key][sub]) === 'text' || getType(configFile[key][sub]) === 'number'">
          <input-component [key]="sub" [value]="configFile[key][sub]" [descriptions]=""></input-component>
        </ng-template>

        <ng-template [ngIf]="getType(configFile[key][sub]) === 'boolean'">
          <checkbox-component [key]="sub" [value]="configFile[key][sub]" [descriptions]=""></checkbox-component>
        </ng-template>

        <ng-template [ngIf]="getType(configFile[key][sub]) === 'array'">
          <array-component [key]="sub" [value]="configFile[key][sub]" [descriptions]=""></array-component>
        </ng-template>
      </div>
    </ng-template>
  </div>

  <span *ngFor="let description of descriptions">{{description}}</span>
</div>

multiarray.component.ts

import {Component, Input} from "@angular/core";

@Component({
  selector: 'multiarray-component',
  templateUrl: './multiarray.component.html',
  styles: [`
    span {
      display: block;
      font-size: 11px;
    }
  `],
})
export class MultiArrayComponent {
  @Input() key: string;
  @Input() value: object;
  @Input() configFile: object;
  @Input() descriptions: string[];

  getType(obj): string {
    let type = Object.prototype.toString.call(obj);
    switch (type) {
      case "[object String]": {
        return "text";
      }
      case "[object Number]": {
        return "number";
      }
      case "[object Boolean]": {
        return "boolean";
      }
      case "[object Array]": {
        return "array";
      }
      case "[object Null]": {
        return "null";
      }
      case "[object Object]": {
        return "multiarray";
      }
      default:
        return "unknown";
    }
  }

  getKeys(object: object): string[] {
    return Object.keys(object);
  }
}

有人可以解释我做错了什么吗？感谢。

Answer 1

<强>固定。问题是我试图从 configFile [key] [sub] 而不是 value [sub]

获取数据

无法读取未定义的属性“日期”

1 个答案: