ngSwitchCase 沒有提供者

Question

我正在看教程並試圖做我學到的東西。我在下面遇到錯誤。我不明白為什么我在瀏覽器控制台上有這個錯誤消息。它說[ERROR ->]<span *ngSwitchCase="true">但我不知道為什么它說 ngSwitchCase 是錯誤的。檢查了所有文件和代碼，但似乎沒有問題。我的錯誤在哪里？

錯誤

Uncaught Error: Template parse errors:
No provider for NgSwitch ("       <td>{{item.description}}</td>
              <td [ngSwitch]="item.action"></td>
              [ERROR ->]<span *ngSwitchCase="true">
                  Yes
              </span>
"): ng:///AppModule/AppComponent.html@25:14
No provider for NgSwitch ("
                  Yes
              </span>
              [ERROR ->]<span *ngSwitchCase="false">
                  No
                </span>
"):

應用程序組件.html

  <table class="table table-striped table-bordered">
                <thead>
                   <tr>
                     <th></th>
                     <th>Description</th>
                     <th>Action</th>
                   </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of items;let i=index">
                  <td>{{i+1}}</td>
                  <td>{{item.description}}</td>
                  <td [ngSwitch]="item.action"></td>
                  <span *ngSwitchCase="true">
                      Yes
                  </span>
                  <span *ngSwitchCase="false">
                      No
                    </span>
                </tr>
                </tbody>
              </table>

app.comonent.ts

export class AppComponent {

  items:Model[]= [
    new Model('Breakfast',false),
    new Model('Sport',false),
    new Model('Studying',true),
    new Model('Cemo',false),
  ]
}

模型.ts

export class Model
{
   description:string;
   action:Boolean;
   constructor(description:string,action:Boolean)
   {
       this.description=description;
       this.action=action;
   }
}

Answer 1

您應該像這樣將其包裹在td標簽內，因為ngSwitch指令是td元素的作用域，而不是td元素之外

<td [ngSwitch]="item.action">
    <span *ngSwitchCase="true">
              Yes
    </span>
    <span *ngSwitchCase="false">
            No
    </span>
  </td>

Answer 2

如果您只需要在兩種選擇之一之間做出選擇，則也可以使用* ngIf-else： https ://ultimatecourses.com/blog/angular-ngif-else-then

Answer 3

您應該首先在父元素上應用 [ngSwitch] 以充當開關案例的容器，並“提供”您正在檢查/比較的條件，以在滿足的子元素中應用/顯示任何開關案例任何類型（屬性/字段/方法/函數）的父級的條件。

所以父元素作為“提供者”

錯誤：在 NodeInjector 中找不到 NgSwitch 的提供程序。

<div>
    <p *ngSwitchCase="true">
              Yes
    </p>
    <p *ngSwitchCase="false">
            No
    </p>
</div>

有提供者且沒有錯誤：

<div [ngSwitch]="something">
    <p *ngSwitchCase="true">
              Yes
    </p>
    <p *ngSwitchCase="false">
            No
    </p>
</div>