Question

使用Angular2 +，材料

我几个小时都找不到答案，所以我会在这里试一试：

我正在制作标签布局。我可以动态添加新标签，这是有效的。但是，我不是仅仅将一些“原始”数据显示为内容，而是希望它是一个完整的组件，但具有单独的值

我的方法现在： - 按钮实例化新的组件对象 - 正在修改组件值 - 修改后的组件正被添加到数组中 - 然后我迭代它放入的数组 - 对于保存到阵列的每个组件：生成1个选项卡 - 现在问题是：尝试用特定组件填充标签内容

HTML中的

：

<mat-tab-group>  <mat-tab *ngFor="let tab of tabs" label={{tab.title}}> SHOW MODIFIED COMPONENT HERE </mat-tab>
</mat-tab-group>

...

<button mat-raised-button color="basic" (click)="updateUser()">Update</button>

TS中的

：

  tabs: any[] = [];

...

  updateUser() {
    const newUser = new UserdetailsComponent(new FormBuilder(), this.dataService);
    newUser.title = 'tester';
    newUser.emailFormControl.patchValue('JOHN@WAYNE.COM');
    this.tabs.push(newUser);
  }
...

UserdetailsComponent，将被实例化，修改和显示：

@Component({
  selector: 'app-userdetails',
  templateUrl: './userdetails.component.html',
  styleUrls: ['./userdetails.component.css'],
})
export class UserdetailsComponent implements OnInit {
  title = 'New User';

  ...

  constructor(private formBuilder: FormBuilder, private dataService: DataService) {
    this.emailFormControl = new FormControl('', [
      Validators.required,
      Validators.email,
    ]);

...

    this.formGroup = formBuilder.group({
      'email': this.emailFormControl,
...
    });
  }
...

我没有收到任何错误，我也可以从我在HTML中动态推入标签的组件中加载标题。更改组件属性（title和emailFormControl）有效。但我需要在选项卡内容字段中显示整个组件，而不仅仅是部件。有什么想法吗？

创建，修改和显示组件

0 个答案: