angular - 将数据从 HTML 传递到组件 Angular 4

Question

我是 Angular 的新手，我正在尝试做一些听起来很简单但我发现非常困难的事情。我有一个 *ngFor 语句，它为集合中的每个项目创建一个新的 div，并使用双括号 {{ }} 在该 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

请参阅下面的示例以了解 Angular 4 中 *ngFor 的概念。

HTML

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

你的组件.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
    }
}