Wie Verknüpfen einer Schaltfläche mit einer anderen Komponente in einem Array

Question

starken Text Hallo, ich bin neu in Angular2 und ich brauche etwas Hilfe. Ich mache eine Katalog-App. Ich habe ein Array erstellt (ich denke, es ist eins), aber ich brauche jedes Element im Array mit einer anderen Komponente verknüpft werden. Ich beabsichtige, eine Verknüpfung in der Typoskript-Datei für jedes Element zu haben, dann ruft die Schaltfläche in der HTML-Datei es auf. Ich bin mir jedoch nicht sicher, wie es geht.

Typoskript Datei:

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-Datei:

<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

Wenn Sie Absicht sind, um tatsächlich zu einem anderen p zu navigieren schnüren Sie einfach eine Eigenschaft auf jedem Element des Arrays namens URL oder Quelle oder etwas ähnliches

{ 
    "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>” 

}

Dann auf der html haben können Sie so etwas wie

<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> 

Durch die haben So funktioniert der Button Review funktioniert nicht, da Buttons keine href haben. Sie sollen normalerweise nicht navigieren. Sie sind zum Auslösen von Aktionen gedacht.

können Sie das gewünschte Ergebnis erzielen, indem sie <a href="/home" class="btn">Review</a> und Stil mit mit einigen CSS