ngFor in select选项，带有来自另一个组件的选择器

Question

我在select中列表项的迭代有问题。

我想要显示的是子组件中的列表项

<li
  class="list-group-item clearfix" 
  (click)="onSelected()">
    <div class="pull-left">
      <h4 class="list-group-item-heading">{{project.name}}</h4>
    </div>
</li>

在选择选项内

<div class="form-group">
  <select class="form-control" id="projects">
    <option *ngFor="let project of projects">
      <app-project-item
          *ngFor="let projectElement of projects"
          [project]="projectElement"
      ></app-project-item>
    </option>
  </select>
</div>

但下拉列表显示两个项目。

我必须从子组件迭代列表项是很重要的。

怎么了？ Stackblitz

Answer 1

@Corry，你提出的最后一个StackBitz是通过服务通信的父母和子女的一个例子：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

所以，你的projectlist.component.html就像

<select #project (change)="changeProject(project.value)">
  <option *ngFor="let projectElement of projects"
          [value]="projectElement.id">{{projectElement.name}}</option>
</select>

看看如果选择更改，我们将函数changeProject称为参数，选择项目的“id”

在projectlist.component.ts中

ngOnInit() {
    this.projects = this.projectService.getProjects();
    //See that this.projectService.getProject it's NOT an observable
    //just the elements. If this function was an observable 
    // we must subscribe to it

    //At first call the function with the first element
    this.changeProject(this.projects[0].id);
}
changeProject(value:any)
{
   //"emit" a new value in the observable of the service
   this.projectService.projectSelected.emit(this.projects.find(d=>d.id==value));
}

无论如何，这是一个“奇怪的”代码。如果你想要两个关系选择（并且元素总是不多，你可以简单地说

export class ProjectsComponent implements OnInit {

  selectedProject: Project;
  projects:Project[];
  constructor(private projectService: ProjectService) { }

  ngOnInit() {

    this.projects = this.projectService.getProjects();
    this.selectedProject=this.projects[0];
  }
}

和你的ProjectsComponent .html一样

      <form>
        <select name="project" [(ngModel)]="selectedProject">
          <option *ngFor="let projectElement of projects"
              [ngValue]="projectElement">{{projectElement.name}}</option>
        </select>
        <select >
          <option *ngFor="let task of selectedProject?.tasks">{{ task.name }}
          </option>
        </select>
      </form>                            

Answer 2

您正在循环每个项目：

<app-project-item *ngFor="let projectElement of projects"
 [project]="projectElement"></app-project-item>

这将导致每个选项都包含所有项目。

我不确定你为什么这样做而不仅仅是：

<option *ngFor="let project of projects">{{project.someLabel}}</option>