我可以將模板應用於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>

工作演示

希望這個能對您有所幫助！