0

我在 Angular 中显示来自 Localstorage 的嵌套值时遇到问题。问题出在第二个 *ngFor 上。第一个 *ngFor 显示良好。第二个 ngFor 出现“TypeError: Cannot read property 'toUpperCase' of undefined”的错误？我不知道为什么是 toUppercase 因为我在这里没有使用大写

PIC

HTML

<mat-list-item role="listitem" *ngFor="let bookmark of bookmarks">
     {{ extractNameFromJson(bookmark[1]).id }}
         <ul>
           <li *ngFor="let extractNameFromJson(bookmark[1])?.cuesData of bookmark">
                   {{ }}   
            </li>
         </ul>
 </mat-list-item>

TS

 getAllBookmarks() {
   this.bookmarks = Object.entries(localStorage);
   console.log(this.bookmarks);
 }

 extractNameFromJson(obj) {
    obj = JSON.parse(obj);
    return obj;
  }
4

2 回答 2

0

您需要首先将每个书签的值作为变量获取*ngFor。使用 . 从循环中提取变量时不能调用函数ngFor。一种方法是pipe在循环时为您执行此过滤，或者另一种方法是使用ng-container循环并仅显示lis您的条件是否通过。

<ng-container *ngFor="let eachBookMark of bookmark">
    <ng-container *ngIf="extractNameFromJson(eachBookMark[1]) as data">
        <ng-container *ngIf="data.cuesData">
            <li *ngFor="data.cuesData">
                {{data | json}}
            </li>
        </ng-container>
    </ng-container>
</ng-container>

编辑： 如果您想更改bookmarksts 中的数组，也许您可​​以这样做：

this.bookmarks = this.bookmarks.map(([first, second]) => {
    return [first, JSON.parse(second)];
});

现在，如果你已经这样做了，那么你的 HTML 可以很简单：

<mat-list-item role="listitem" *ngFor="let eachBookMark of bookmarks">
    <ul>
        <ng-container *ngIf="eachBookMark[1].cuesData as cuesData">
            <li *ngFor="let eachCue of cuesData">
                {{ eachCue.description }}   
            </li>
        </ng-container>
    </ul>
</mat-list-item>

编辑2：

this.filteredBookmarks = this.bookmarks.reduce((acc, [first, second]) => {
    const parsedOb = JSON.parse(second);
    if (parsedOb.cuesData) {
        acc.push([first, parsedOb]);
    }
    return acc;
}, []);

<mat-list-item role="listitem" *ngFor="let eachBookMark of filteredBookmarks">
    <ul>
        <li *ngFor="let eachCue of cuesData">
                {{ eachCue.description }}   
        </li>
    </ul>
</mat-list-item>

上述所有过滤（map/reduce）都将发生在您要填充的地方bookmarks。

于 2020-05-11T08:11:04.157 回答
0

按要求更新

TS：

 getAllBookmarks() {
   this.bookmarks = this.extractNameFromJson(Object.entries(localStorage));
   console.log(this.bookmarks);
 }

 extractNameFromJson(obj) {
   obj = JSON.parse(obj);
   return obj;
 }

HTML：

<mat-list-item role="listitem" *ngFor="let bookmark of bookmarks">
  {{ bookmark[1].id }}
  <ul *ngIf="bookmark[1].cuesData>
    <li *ngFor="let cue of bookmark[1].cuesData">
      {{ cue.description }}   
    </li>
  </ul>
</mat-list-item>

原始答案

第二种*ngFor语法不正确

从您发布的内容推断，这就是您所需要的。

更新：新增功能extractNameFromJson

     <ul *ngIf="bookmark[1].cuesData">
       <li *ngFor="let cue of extractNameFromJson(bookmark[1].cuesData)">
         {{ cue.description }}   
       </li>
     </ul>

假设您需要description从屏幕截图中显示，您可以显示startTime或endTime也可以。

希望能帮助到你！

于 2020-05-11T08:19:04.227 回答