我可以将模板应用于Angular中ngFor-循环的对象变量吗？

Question

I have a app-projects template which is a list of ProjectComponent . For ProjectComponent . I have the app-project template.

<ul>
<li *ngFor="let project of projects">
  <app-project></app-project> 
</li>
</ul>

Component:

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {

  constructor(title: string, description: string, questions: string[]) { }

  ngOnInit() {
  }

}

So, now I want to iterate over the the individual projectComponents while applying their templates.

But I could not figure out how to do that: If I want to stick with the separate template I somehow would have to pass the item to the template.

I found that it would be possible for single properties via Inputs, but that does not help me much with this.

Answer 1

First you need to get the project into your ProjectComponent as input property using @Input() to do that.

You could use like bellow:

ProjectComponent:

export class ProjectComponent {

  @Input() project;

  constructor() { }

}

In the template you are using <app-project> you need to input that project property into ProjectComponent like bellow:

<ul>
    <li *ngFor="let project of projects">
        <app-project [project]=project></app-project>
    </li>
</ul>

WORKING DEMO

Hope this will help you!