ボタンを配列内の別のコンポーネントにリンクする方法

Question

強いテキスト こんにちは、私はAngular2が初めてで、何か助けが必要です。私はカタログアプリをやっています。私は配列を作成しましたが（私はそれが一つだと思いますが）、配列の各項目を別のコンポーネントにリンクする必要があります。私は、各項目のTypescriptファイルにリンクをつけようとしています。そして、HTMLファイルのボタンがそれを呼び出します。しかし、私はそれを行う方法についてはよく分かりません。

活字ファイル：

export class NikeComponent implements OnInit { 
 
title = 'Nike Catalgoue'; 
 
    
 
    nikeShirts = [ { 
 
\t "id": 1, 
 
\t "name": "Nike SB x Medicom Dry", 
 
\t "description": "Men's T-Shirt", 
 
\t "inStock": "$49", 
 
     "image": "../assets/nike_shirt_1.jpg", 
 
    
 
    }, 
 
{ 
 
\t "id": 2, 
 
\t "name": "NikeLab ACG", 
 
\t "description": "Men's T-Shirt", 
 
\t "inStock": "$109", 
 
    "image": "../assets/nike_shirt_2.jpg" 
 
}, 
 
{ 
 
\t "id": 3, 
 
\t "name": "Nike Futura Icon", 
 
\t "description": "Men's T-Shirt", 
 
\t "inStock": "$42", 
 
    "image": "../assets/adidas_shirt_3.jpg" 
 
}, 
 
{ 
 
    "id": 4, 
 
\t "name": "Nike SB x Medicom Dry", 
 
\t "description": "Men's T-Shirt", 
 
\t "inStock": "$49", 
 
     "image": "../assets/nike_shirt_1.jpg", 
 
    
 
    }, 
 
{ 
 
\t "id": 5 , 
 
\t "name": "NikeLab ACG", 
 
\t "description": "Men's T-Shirt", 
 
\t "inStock": "$109", 
 
    "image": "../assets/nike_shirt_2.jpg" 
 
}, 
 
{ 
 
\t "id": 6, 
 
\t "name": "Nike Futura Icon", 
 
\t "description": "Men's T-Shirt", 
 
\t "inStock": "$42", 
 
    "image": "../assets/nike_shirt_3.jpg" 
 
}];

HTMLファイル：

<li *ngFor = "let nikeShirt of nikeShirts"> 
 
    <img src ={{nikeShirt.image}} height="200" width="250" /> 
 
    <h2> {{nikeShirt.name}} </h2> 
 
\t <p> <i>{{nikeShirt.description}}</i> </p> 
 
\t <p> {{nikeShirt.inStock}} </p> 
 
    <button href="/home" class="btn">Review</button> 
 
</li> 
 
</ul>

Answer 1

あなたが意図している場合は実際には異なるPに移動することですあなたは、単に配列と呼ばURLまたはソースまたは類似した何かその後

{ 
    "id": 1, 
    "name": "Nike SB x Medicom Dry", 
    "description": "Men's T-Shirt", 
    "inStock": "$49", 
    "image": "../assets/nike_shirt_1.jpg", 
    “url”: “<your url here>” 

}

HTML上の各要素のプロパティを持つことができますレースあなたは

ことで

<li *ngFor = "let nikeShirt of nikeShirts"> 
    <img src ={{nikeShirt.image}} height="200" width="250" /> 
    <h2> {{nikeShirt.name}} </h2> 
<p> <i>{{nikeShirt.description}}</i> </p> 
<p> {{nikeShirt.inStock}} </p> 
    <a href=“{{nikeShirt.url}}” </a> 
    <button href="/home" class="btn">Review</button> 
</li> 

のようなものを持つことができますボタンはhrefがないので、レビューは機能しません。通常はナビゲートしないことを意味しません。それらはアクションをトリガーするためのものです。

あなたはそれが魅力のように働いていた私のおやっ