select 选项中的 ngFor 与 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>

select 选项内部

<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

您正在遍历每个项目：

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

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

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

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

Answer 2

@Corry，你放的最后一个 StackBitz 是通过服务通信 parent 和 children 的示例：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>

看到如果 select 发生变化，我们调用函数 changeProject 作为参数 "id" 项目 selected

并在 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));
}

无论如何，这是一个 "bizarro" 代码。如果你想有两个相关的 select （如果元素不多，你可以简单地

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>

select 选项中的 ngFor 与 select 或来自另一个组件

ngFor in select option with selector from another component

typescript

ngfor

angular