角4“英雄教程”与“templateUrl”绑定问题，“NgIf”

问题描述：

我一直都在角4教程和我来到这里角4“英雄教程”与“templateUrl”绑定问题，“NgIf”

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

我跟所有的步骤忠实的，除了1件事：我真的不喜欢把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>

THE ISSUE

问题是，如果我使用“模板”它的作品，但如果我使用“templateUrl”它不！

是否有任何像Angular1范围和ngIf的问题？

您是否收到任何错误？你有没有在你的.ts文件中用selectedHero改变英雄变量？ – porgo

哎！你是对的...我错过了更换：D –

@porgo如果你想回答我可以选择你的答案 –

答

你在你的HTML文件变英雄可变进selectedHero。在您的组件.ts文件中更改它。

答

这里的问题

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

这使得在 “英雄” “selectedHero”。所以在HTML我必须使用hero而不是selectedHero

希望这有助于

角4“英雄教程”与“templateUrl”绑定问题，“NgIf”

相关推荐