Question

我想使用ngSwitch有条件地呈现一些内容，但我希望该内容是唯一要呈现给DOM的内容。我将以一个例子来说明。

这就是我目前的情况：

<div [ngSwitch]="thing.name">
    <template ngSwitchWhen="foo">
        <div>FOOOOOO</div>
    </template>
    <template ngSwitchWhen="bar">
        <div>BARRRR</div>
    </template>
    <template ngSwitchWhen="cat">
        <div>CAT</div>
    </template>¯
    <template ngSwitchWhen="dog">
        <div>DOG</div>
    </template>
</div>

我想将父元素从<div>更改为<template>，因此只有最内部元素才会实际插入到DOM中。我怀疑它可能是可能的，因为我知道你可以用ngFor做类似的事情，即：

<template ngFor [ngForOf]="things" let-thing="$implicit">

然而，我还没有能够弄清楚如何让它在ngSwitch

上工作

Answer 1

自最终版本发布以来，现已支持。以下代码可以应用于您的示例：

var groups:[Group]!
    func numberOfSections(in tableView: UITableView) -> Int {
        return groups.count
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return groups[section].members.count
    }
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        let group = groups[section] as Group
        return group.name
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell Identifier", for: indexPath)
        let member = groups[indexPath.section].members[indexPath.row]
        cell.imageView?.image = member.image
        cell.textLabel?.text = member.designation
        return cell
    }

有关详细信息，请参阅documentation

Answer 2

如果要删除封闭标记，可以使用ng-container而不是div。然后由你在开关盒内提供你想要的任何东西（这里是'divs'）。感谢@Stephane Leger的伎俩

SqlCommand cmd = new SqlCommand("select Email from PadappaiCheckEmail where Email = @Email", con);

Answer 3

从Angular 6 ng-template或template开始，不能使用ng-container

<div [ngSwitch]="'case 3'">
  <ng-container *ngSwitchCase="'case 1'">
      <li > Case 1</li>
  </ng-container>
  <ng-container *ngSwitchCase="'case 2'">
      <li > Case 2</li>
  </ng-container>
  <ng-container *ngSwitchCase="'case 3'">
      <li > Case 3</li>
  </ng-container>
</div>

Answer 4

不支持。请参阅此问题https://github.com/angular/angular/issues/3306

来自此评论https://github.com/angular/angular/issues/3306#issuecomment-125368361

这是按预期工作的。我知道这有点奇怪。但如果我们改变它
<ul *ng-switch="value">   
  <li *ng-switch-when="'1'">is 1</li>   
  <li *ng-switch-when="'2'">is 2</li>   
  <li *ng-switch-default>is another value</li> 
</ul>
它会说是<ul>之前不应创建的   ng-switch决定需要创建它。这意味着嵌套   永远不会创建ng-switch-when。如果ng-switch会以某种方式   跳过它自己，它会删除会改变用户的<ul>   行为。所以没有简单的方法来创建嵌套。

将ng-switch视为容器。它始终存在，并且想到   ng-switch-when作为可能或网络可能存在的模板。该   容器无法删除，因此无法*

Answer 5

<ng-container [ngSwitch]="activeLayout">
  <ng-container *ngSwitchCase="'layout1'" [ngTemplateOutlet]="template1"></ng-container>
  <ng-container *ngSwitchDefault [ngTemplateOutlet]="defaultTemplate"></ng-container>
</ng-container>

这是我需要切换其他ng-template的解决方案。我希望它对您有用。

Answer 6

<div [ngSwitch] = "thing.name">
                <p *ngSwitchCase="'red'">para Red</p>
                <div *ngSwitchCase="foo">FOOOOOO</div>
                <div *ngSwitchCase="bar">BARRRR</div>
                <div *ngSwitchCase="cat">CAT</div>
                <div *ngSwitchCase="dog">DOG</div>
                <p *ngSwitchDefault>universe..</p>
            </div>

Angular2 ngSwitch仅限<template>

6 个答案: