将 [(ngModel)] 添加到组件标签答案

【问题标题】：Adding a [(ngModel)] to a component tag将 [(ngModel)] 添加到组件标签
【发布时间】：2020-07-04 03:24:04
【问题描述】：


<div *ngFor="let file of files" name="durl" [(ngModel)]="project.durl" >
  <app-upload-task [file]="file"></app-upload-task>
</div>

美好的一天，我是 Angular 的新手，我想问一下我是否可以在上面的代码中使用这种格式的 ngModel 从上传任务组件中获取 project.durl，或者我该如何去做。谢谢

【问题讨论】：

ngModel 基本上用于 HtmlElements，它接受来自用户的输入，例如 input | select。您能否详细说明为什么要在 div 元素中使用 ngModel 以及您要达到什么目的？
你不能这样。您需要在父组件中将 app-upload-task 声明为 @ViewChildren 并从那里获取属性
它是表单格式，我想发布到我的node.js服务器和mongoose的图片的url在那个上传任务组件中，所以我想使用组件标签

标签： angular firebase angular9 ngmodel

【解决方案1】：

尚未测试，但这应该与您正在寻找的内容非常接近

父 HTML

<div *ngFor="let file of files">
  <app-upload-task [file]="file"></app-upload-task>
</div>

父母.ts

@Component({
  selector: 'my-app-parent',
  templateUrl: './parent.component.html',
  styleUrls: [ './parent.component.css' ]
})

export class ParentComponent implements AfterViewInit {
  @ViewChildren(UploadTaskComponent) viewChildren: QueryList<UploadTaskComponent>;
  ...
  ngAfterViewInit() {
     var project = this.viewChildren.find(your_predicate_to_find_necessary_child);
  }
}

【讨论】：