角2について - 配列から変数を抽出する（正面：htmlとcomponent.tsに関連）

Question

以下は私のコードです。私は 'mydmcanotice'という配列を持っていて、{{}}のように4つの属性を持っています。 mydmcanoticeの各dmcaには、ボタンがあります。ボタンをクリックすると、テキストエリアにdmca.nameofsongが表示されますが、これを行う方法がわかりません。

たとえば、mydmcanotice配列の最初の要素であるnameofsong属性は "Victor"と呼ばれます。したがって、ボタン（DMCA通知を送信）をクリックすると、名前のビクターがテキストエリアに表示されます。また、ボタンをクリックするとshowbody booleanがtrueになります（sendNotice（）をクリックするとtrueになります）。

私は角2を初めて使用していますので、これが簡単であれば私を許してください。必要に応じて、component.tsファイルのコードを追加することができます。ありがとう！

dmca.component.htmlあなたがそうでなければ何をしたいデータを知ることができません通知を送って、あなたは、アレイ内の適切な曲を指すsendNotice()に変数を渡すことを確認する必要があり

<ul> 
    <li *ngFor = "let dmca of mydmcanotice"> 
     {{dmca.nameofsong}} - {{dmca.nameofsonguploader}} - {{dmca.nameofpersonsending}} - {{dmca.content}} 
     <br><button (click)="sendNotice()" >Send DMCA Notice!</button> 
    </li> 
</ul><br> 

<div *ngIf = "showbody == true"> 
    <textarea rows = "15" cols = "150" [(ngModel)] = "content"> 
    </textarea> 
</div> 

Answer 1

テキスト領域を塗りつぶす。

アレイ上indexOf()を使用してsendNotice()にあなたの配列のインデックスを追加します。インデックスがsendNotice()に渡され

<button (click)="sendNotice(mydmcanotice.indexOf(dmca))" >Send DMCA Notice!</button> 

たら、アレイにアクセスするためにインデックスを使用することができます。

sendNotice(index) { 
    this.somebody = true; 
    this.content = this.mydmcanotice[index].nameofsong; 
} 

コンポーネントの実際のバージョンの例を次に示します。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'dmca-app', 
    template: ` 
    <ul> 
     <li *ngFor = "let dmca of mydmcanotice"> 
      {{dmca.nameofsong}} - {{dmca.nameofsonguploader}} - {{dmca.nameofpersonsending}} - {{dmca.content}} 
      <br><button (click)="sendNotice(mydmcanotice.indexOf(dmca))" >Send DMCA Notice!</button> 
     </li> 
    </ul><br> 

    <div *ngIf="somebody"> 
     <textarea rows = "15" cols = "150" [(ngModel)]="content"> 
     </textarea> 
    </div>` 
}) 
export class DMCAComponent { 

    // Mock Data 
    mydmcanotice = [ 
     { 
      nameofsong: "Heathens", 
      nameofsonguploader: "Twenty One Pilots", 
      nameofpersonsending: "Tyler", 
      content: "I am content", 
     }, 
     { 
      nameofsong: "Style", 
      nameofsonguploader: "Taylor Swift", 
      nameofpersonsending: "Taylor", 
      content: "I am also Content", 
     } 

    ]; 

    // Variables 
    content = { }; 
    somebody = false; 

    // Constructor 
    constructor() { } 

    // Functions 
    sendNotice(index) { 
     this.somebody = true; 
     this.content = this.mydmcanotice[index].nameofsong; 
    } 

} 

ここでさらに

は、ngModelとのindexOf上のいくつかのリンクです：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html