角度4、私は角度4チュートリアルを追ってきたし、私はここに</p> <blockquote> <p><a href="https://angular.io/tutorial/toh-pt3" rel="nofollow noreferrer">https://angular.io/tutorial/toh-pt3</a></p> </blockquote> <p>を得ました「templateUrl」と「NgIf」

Question

でバインド問題を「英雄はチュートリアル」私はすべての手順に従っ忠実に、1つを除いて： 私は本当にJSやTSにHTMLを書くのが好きではありません。

@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> 
    ` 
}) 

をしかし、それは次のようになります：

だから私の "英雄の詳細" コンポーネントは次のようになります。私は、一致するHTMLを作成した。もちろん、

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

<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"を使用しても問題ないということです！

スコープとngIfでAngular1のような問題はありますか？ここで

Answer 1

を助けheroしていないselectedHero

希望を使用する必要があります。コンポーネントの.tsファイルでも変更してください。

Answer 2

は問題

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

これは "英雄" の "selectedHero" を置きます。 だからHTMLに、私は、これはあなたのhtmlファイルにselectedHeroに英雄の変数を変更し