HTMLからコンポーネントにデータを渡す角度4

Question

私はAngularを初めて使いました。とてもシンプルに聞こえるものをしようとしていますが、これは非常に難しいものです。 * ngForステートメントでコレクション内の各アイテムの新しいdivを作成し、その中に二重中括弧{{}}を使用して値を表示します。私はその価値を私のcomponent.tsに渡したいが、そうする方法を見つけ出すことはできなかった。

は、ここで私がしようとしたものの一つです：

HTML：

<div *ngFor="let auditType of auditTypes; let i=index"> 
      <br /> 
      <a (click)="filterByAuditType(auditType)"> 
       <div [selection]=auditType [id]="'AuditType' + i" class="filterChoices" (click)="highlightSelected($event)">{{auditType}}</div> 
      </a> 
</div> 

「auditType」の値が、私はコンポーネントに渡したいものですので、私はjQueryのアクションを実行することができますそれ。

コンポーネント：

export class ComponentTeamsComponent implements OnInit, OnDestroy { 
    @Input() selection: string; 

ngOnInit() { 
this.checkIfSelected(this.selection); 
} 

checkIfSelected(selection: string): void { 
    $('*').each(function() { 
     if ($(this).hasClass('highlightMenu')) { 
      if ($(this).attr('id').indexOf('AuditType') > -1) { 
       this.filterByAuditType(selection); 
      } 
     --- //more code 
    } 
}); 

私の理解は、現在コンポーネントがHTML（すなわち、しない子コンポーネント）と同じレベルにある場合@Inputが動作しないことです。あなたが何かを知っていれば助けてください。

Answer 1

あなただけのコンポーネントに `auditType`に合格した* ngFor HTML

角度4.

で

<div *ngFor="let Country of countryList; let i=index" (click)="highlightSelected(Country)" name = "name">{{Country.name}}</div> 

YourComponent.ts

export class ComponentTeamsComponent implements OnInit, OnDestroy { 
    countryList:any[]; 
    ngOnInit() { 


     this.countryList = [ 
     { name: "United States"}, 
     {name: "Australia"}, 
     {name: "Canada"}, 
     {name: "Brazil"}, 
     {name: "England"} 
     ]; 
    } 


    highlightSelected(selectedCountry) { 
     console.log(selectedCountry.name); 
     // your rest code goes here 
    } 
}