Angular 4“ Heroes教程”与“ templateUrl”和“ NgIf”的绑定问题

Question

我一直在关注Angular 4教程，我到了这里

https://angular.io/tutorial/toh-pt3

我忠实地遵循了所有步骤，除了以下几点：我真的不喜欢将HTML写入JS或TS。

因此，我的“英雄细节”组件应如下所示：

@Component({
  selector: 'hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})

但它看起来像这样：

@Component({
    selector: "hero-detail",
    templateUrl: "./templates/heroes_detail.html",
    styleUrls: ["./css/heroes_detail.css"]
})

当然我创建了匹配的HTML

<div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id: </label>{{selectedHero.id}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </div>
</div>

问题

问题是，如果我使用“ template”，它会起作用，但是如果我使用“ templateUrl”，它就不会起作用！

是否有像Angular1这样的问题与scope和ngIf？

Answer 1

您将html文件中的hero变量更改为selectedHero。 还要在您的.ts文件中进行更改。

Answer 2

这是问题所在

<hero-detail [hero]="selectedHero"></hero-detail>

这将“ selectedHero”放入“ hero”。 因此，在HTML中，我必须使用hero而不是selectedHero

希望这可以帮助