* ngFor指令不适用于数组数组

Question

我有一个要用作目录的数组数组。 关键是要根据它们以哪个字母开头对所有项目进行排序。

这是我的商品清单组件的代码：

let itemList = ["Plane","Bird","Boat"];
let directory = [];
for (const item of this.itemList) {
    if (this.directory[item.charAt(0).toLowerCase()] == null || undefined) {
        this.directory[item.charAt(0).toLowerCase()] = [];
    }
    this.directory[item.charAt(0).toLowerCase()].push(item);
}

然后，我想显示按照首字母排序的所有项目，并且希望将首字母显示在以它开头的项目列表上方，就像目录一样。 我在HTML中使用以下模板：

<div id="item-list">
  <div *ngFor="let entry of directory ; let i = index">
    <p>{{i}}</p>
    <div *ngFor="let item of entry">
      <p>{{item}}</p>
      <app-item></app-item>
    </div>
  </div>
</div>

但是，当我运行我的应用程序时，没有看到HTML显示的数据。 我尝试在几个点上打印文本：

<div id="item-list">
  <p>Hello</p>
  <div *ngFor="let entry of directory ; let i = index">
    <p>Hello again</p>
    <p>{{i}}</p>
    <div *ngFor="let item of entry">
      <p>{{item}}</p>
      <app-item></app-item>
    </div>
  </div>
</div>

该网页显示“ Hello”，但不显示“ Hello again”（我认为后者应打印两次）。 但是，在运行ng serve或加载页面时，绝对没有错误消息。 我在网上搜索了类似的问题，但是似乎没有人会面临同样的困难来动态显示数组。

你能告诉我我做错了什么吗？ 任何帮助将不胜感激。 :)

Answer 1

stackblitz： https ://stackblitz.com/edit/angular-tujusv

目录数组是一个key：value对数组。 您可以将密钥存储在其他数组中，并在html中访问它们

export class ItemListComponent implements OnInit {
  alphabet: string[];
  directory = [];
  dirArr =[];
  itemList = ["Plane", "Bird", "Boat"];
  constructor() {
    this.alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

  }


  ngOnInit() {

    this.itemList.sort();
    for (const item of this.itemList) {
      if (this.directory[item.charAt(0).toLowerCase()] == null || undefined) {
        this.directory[item.charAt(0).toLowerCase()] = [];
      }
      this.directory[item.charAt(0).toLowerCase()].push(item);
      console.log(this.directory);
      this.dirArr = Object.keys(this.directory);
      console.log(this.dirArr)

    }

    console.log(this.directory['p']);


  }
}

HTML：

<div id="item-list">
  <p>Hello</p>
  <div *ngFor="let entry of dirArr ; let i = index">
    <p>Hello again</p>
    <p>{{i}}</p>
    <p>{{entry}}</p>
    <p>{{directory[entry]}}</p>
    <div *ngFor="let item of directory[entry]">
      <p>{{item}}</p>
    </div>
  </div>
</div>

Answer 2

设置一个临时变量，其他代码也可以：仅更改以下代码：

let itemList = ["Plane","Bird","Boat"];
  let temp = {};
  let directory = []

 for (const item of this.itemList) {

    if (this.temp[item.charAt(0).toLowerCase()] == null || undefined) {
        this.temp[item.charAt(0).toLowerCase()] = [];
    }
    this.temp[item.charAt(0).toLowerCase()].push(item);

  }
   this.directory = Object.values(this.temp)

Answer 3

JavaScript中的键控和嵌套结构是使用OLN构造的。 它们以您试图构造数据的方式支持key：value对。

您的用例数据结构似乎是：

{
  b : ["Bird", "Boat"],
  p  : ["Plane"]
}

但是您正在尝试构造：

[
  b => [ "Bird", "Boat"], p => ["Plane"]
]

在JavaScript中无效。

将directory声明从[] 更改为{}

Answer 4

我已经做了以下更改，以满足您的要求，请尝试一次。

this.items = this.items.sort();
let currentLetter = this.items[0].charAt(0);
let currentLetterLib = [];
for (let item of this.items) {
  if (item.charAt(0).toLowerCase() != currentLetter) {
      this.directory.push({
        "letter": currentLetter,
        "words": currentLetterLib
      });
      currentLetter = item.charAt(0).toLowerCase();
      currentLetterLib = [];
  }
  currentLetterLib.push(item);
}
this.directory.push({
  "letter": currentLetter,
  "words": currentLetterLib
});

<div id="item-list">
  <p>Hello</p>
  <div *ngFor="let entry of directory ;">
    <p>{{entry.letter}}</p>
    <div *ngFor="let item of entry.words">
      <p>{{item}}</p>
    </div>
  </div>
</div>