角“未定义标识符'todos'。”

Question

可能是此错误的原因

“未定义标识符'todos'。组件声明，模板变量声明，元素引用

我一直试图在ionic4中将其链接到firebase上运行，并且此错误在各种行（12,36）和（9,41）上弹出。

<ion-header>
          <ion-toolbar color="primary">
            <ion-title>
              Ionic FireStore
            </ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content>

          <ion-list>
            <ng-container *ngIf="!todos || todos.length == 0">
              <div *ngFor="let n of [0,1,2]" padding>
                <p>
                  <ion-skeleton-text class="fake-skeleton"></ion-skeleton-text>
                </p>
              </div>
            </ng-container>
          <ion-item-sliding *ngFor="let item of todos">
            <ion-item lines="inset" button[routeLink]=" ['/details, item.id'] ">
              <ion-label>
                {{item.task}
              <p>{{ item.createdAt | date:'short'}} </p>
              </ion-label>
              <ion-note slot="end" color="primary"> {{ item.priority }} </ion-note>

            </ion-item>
            <ion-item-options side="end">
              <ion-icon name="checkmark" slot="end"></ion-icon>
            </ion-item-options>
          </ion-item-sliding>
          </ion-list>

          <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button routerLink="/details" routerDirection="forward">
              <ion-icon name="add"></ion-icon>
            </ion-fab-button>

          </ion-fab>

    </ion-content>

Answer 1

未定义“待办事项”。

这是一个Javascript错误。 它说您尚未定义变量todos 。

您最有可能具有包含描述的HTML的组件 。

您可以尝试以下...

...in component
todos;
constructor()...

要么

...in component
todos = [];
constructor()...

旁注...

打开浏览器控制台，然后键入：todos;

您回来：“ Uncaught ReferenceError：未定义todos”

类型：var todos;

您返回：“未定义”

看到不同？ “已定义” todos变量的“未定义”引用了未定义的右侧分配； 也就是说，它与定义的待办事项无关。 这有点令人困惑。

使用前必须先定义所有变量。 当您在javascript类中定义变量时，我们忽略了var / let，只是将其声明为

class Todo {
  todos;

  constructor(){}
}

声明了todos变量。 左手分配是待办事项，而右手默认是未定义的，因为未提供任何内容。 未定义指向右侧，而不是左侧。 在使用任何变量之前，我们必须始终提供左侧分配。

您正在使用“！todos || todos.length == 0”

！todos表示存在一个已定义的变量todos，该变量的falsey右侧分配为false，0，“”，null，NaN或undefined。 然后，您正在使用BANG运算符来翻转逻辑。 无论如何，您必须在适当的范围内定义变量todos 。

Answer 2

我想你在这里回答了自己：

<ng-container *ngIf="!todos || todos.length == 0">

如果未定义待办事项，则该ng容器不应显示！

现在，在该ng容器之外，您具有：

<ion-item-sliding *ngFor="let item of todos">

您也应该在这里添加ng-container中的代码，这样您将获得以下内容：

<ng-container *ngIf="!todos || todos.length == 0">
   <ion-item-sliding *ngFor="let item of todos">
</ng-container>

然后，如果待办事项未定义，也不会显示该离子项目滑动！