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

Question

我有一个app-projects模板，它是ProjectComponent的列表。 对于ProjectComponent 。 我有应用程序项目模板。

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

零件：

@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() {
  }

}

因此，现在我想在应用其模板时遍历各个projectComponents。

但是我不知道该怎么做：如果我要坚持使用单独的模板，则必须以某种方式将项目传递给模板。

我发现通过输入可以使用单个属性，但这对我没有太大帮助。

Answer 1

首先，您需要使用@Input()将project作为输入属性进入ProjectComponent 。

您可以像下面这样使用：

ProjectComponent：

export class ProjectComponent {

  @Input() project;

  constructor() { }

}

在您使用<app-project>的模板中，您需要将该project属性输入到ProjectComponent ，如下所示：

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

工作演示

希望这个能对您有所帮助！