首页 文章

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

提问于
浏览 次
0

我是Angular的新手，我正在尝试做一些听起来很简单的事情，但我觉得这很难 . 我有一个* ngFor语句，它为集合中的每个项目创建一个新div，并使用双括号{{}}在该div中显示一个值 . 我想将该值传递给我的component.ts，但一直无法弄清楚如何这样做 .

这是我尝试过的一件事：

HTML：

<div *ngFor="let auditType of auditTypes; let i=index">
          

          <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将不起作用 . 如果你知道一些有用的东西，请帮忙 .

angular

1 回答

  • 1

    请参阅下面的示例以了解角度4中 *ngFor 的概念 .

    HTML

    <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
    }
}
    回复于

相关问题