Блог

Я использую шаблон для передачи некоторых данных, а затем отображаю их внутри ngFor. Все работает нормально, кроме FormControl. Когда я обновляю значение для строки, оно обновляется во всех строках.

Вот эта картинка:

Каждый тест представляет собой строку.

Вот несколько кодов:

тест.директива.ts

 import { Directive, TemplateRef } from '@angular/core';  @Directive({  selector: '[appTest]' }) export class TestDirective {   constructor(public template: TemplateReflt;anygt;) { }  }  

строка.компонент.ts

 import {AfterViewInit, Component, OnInit, QueryList, TemplateRef, ViewChildren} from '@angular/core'; import { AppComponent } from '../app.component'; import {TestDirective} from "../test.directive"; import {FormControl} from "@angular/forms";  @Component({  selector: 'app-row',  templateUrl: './row.component.html',  styleUrls: ['./row.component.scss'] }) export class RowComponent implements OnInit, AfterViewInit{  @ViewChildren(TestDirective)  public children: QueryListlt;TestDirectivegt;;  private component: AppComponent;   public ctrl: FormControl = new FormControl();   constructor(component: AppComponent) {  this.component = component;  }   ngOnInit(): void {  }   ngAfterViewInit(): void {  this.component.register(this.children.toArray()[0].template);  } }  

row.component.html

 lt;div *appTestgt;  {{ ctrl.value }}   lt;input [formControl]="ctrl"gt; lt;/divgt;  

app.component.ts

 import {Component, ViewChildren, QueryList, AfterViewInit, TemplateRef} from '@angular/core'; import { TestDirective } from './test.directive';  @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss'] }) export class AppComponent {  title = 'test';   public templates: TemplateReflt;anygt;[] = [];   public data: number [] = [1, 2, 3, 4];   public register(template: TemplateReflt;anygt;) {  console.log(template)  this.templates.push(template);  } }  

app.component.html

 lt;app-rowgt;lt;/app-rowgt;  lt;div *ngFor="let data of data"gt;  lt;ng-container *ngFor="let template of templates" [ngTemplateOutlet]="template"gt;lt;/ng-containergt; lt;/divgt;