Question

import { Component } from '@angular/core';

export class Hero {
    name: string;
}

const HEROES: Hero[] = [
    { name: 'STWX1' },
    { name: 'STWX2' },
    { name: 'STWX3' },
    { name: 'STWX4' }
];

@Component({
    selector: 'my-app',
    template: `
        <div style="display: inline-block; width = 200px; ">
            <ul class="heroes">
                <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
                    [class.selected]="hero === selectedHero">
                    <p>{{hero.name}}</p>
                </li>
           </ul>
       </div>

       <div style="display: inline-block; width = 200px; ">
           <div *ngIf="selectedHero">
               <div ng-switch on="selectedHero.name">
                   <div ng-switch-when="one">
                       <ul class="heroes">
                           <li *ngFor="let hero of heroes" (click)="onSelect1(hero)"
                               [class.selected]="hero === selectedHero1">
                               <p>{{selectedHero.name}}</p>
                           </li>
                       </ul>
                   </div>
               </div>
           </div>
       </div>
       <div style="display: inline-block; width = 200px; ">
           <div *ngIf="selectedHero1">
               <ul class="heroes">
                   <li *ngFor="let hero of heroes">
                       <p>{{hero.name}}</p>
                   </li>
               </ul>
           </div>
       </div>

       <h1>Hello {{name}}</h1>`
   ,
   styles: [...]
})

export class AppComponent  {
    name = 'Angular1';
    testRequestId = '3224';
    heroes = HEROES;
    selectedHero: Hero;
    selectedHero1: Hero;

    goToDivClick() {
        return HEROES;
    }

    onSelect(hero: Hero): void {
        this.selectedHero = hero;
    }

    onSelect1(hero: Hero): void {
        this.selectedHero1 = hero;
    }
}

我正如上所述尝试根据之前选择的内容填充列表。如果选择文本'STWX1'，那么我只想进入开关盒内，但目前还没有发生。请告诉我需要纠正的问题。

Answer 1

您使用的语法不正确。

您必须使用[ngSwitch]和*ngSwitchCase / *ngSwitchDefault：

...
<div [ngSwitch]="selectedHero.name">
  <div *ngSwitchCase="'one'">
...

请参阅docs

如何根据angular2中的先前选择获取列表

1 个答案: