将数据添加到单选按钮的表中，但除第一列外未显示列

Question

没有得到其他列和行。 下面是我的 ts 文件，我在其中拆分了来自 API 的数据。 我正在从 api 获取数据到 dataSource，它们是第一列的列值。 但是没有在其他表格单元格中获得其他值。

formArray = new FormArray([
    new FormControl(),
    new FormControl(),
    new FormControl(),
  ]);
  displayColumns: any[] = [];
  dataSource : any[] = [];
  allColumns = ['question', ...this.displayColumns];

ngOnInit(): void {
    this.questionSettin = JSON.parse(this.question_setting) 
    console.log(this.questionSettin[0].value);
    
    var ab = this.QuestionOptions[0].option_description;
    ab = ab.replace("{",'');
    ab = ab.replace("}",'');
    ab=ab.replace('"row":','');
    ab=ab.replace('"columns":','');
    ab=ab.replace(/'/g, '');
    ab=ab.replace(/"/g,'');
    var aa = ab.split(',');
    var row = aa[0].split("\\n");
    var cols = aa[1].split("\\n");

    console.log(row);
    console.log(cols);
    console.log(aa);

    this.dataSource = row;
    console.log('dataSource',this.dataSource,cols);
    this.displayColumns = cols;
  }

Answer 1

我解决了。 我必须通过在this.allColumns中将“问题”与“cols”连接起来，将“问题”分配给 this.allColumns。 错误是它没有采取行问题，因为我只将问题分配给 allColumns 变量。

this.displayColumns=cols;
    this.allColumns=['question',...cols];
    console.log("display col")
    console.log(this.displayColumns)

Answer 2

我想你想使用 FormControls 的 FormArray 来控制值，所以想象一些像

formArray=new FormArray([
    new FormControl(2),
    new FormControl(2),
    new FormControl(3),
  ])
  dataValue=["1","2","3"]
  displayColumns: string[] = [
     'col1',
    'col2',
    'col3',
  ];

可以顺便用一张简单的表

<table>
  <tr *ngFor="let control of formArray.controls;let row=index">
    <td>{{'row '+row}}</td>
    <ng-container *ngFor="let innerColumn of displayColumns;let i=index">
    <td >
       <mat-radio-button [value]="dataValue[i]" [name]="'rd'+row"
        [checked]="formArray.at(row).value==dataValue[i]" 
        (change)="formArray.at(row).setValue(dataValue[i])"></mat-radio-button>
    </td>
  </ng-container>
  </tr>
</table>

看到您遍历formArray.controls;let row=index并使用“行”为 mat-radio-button 命名并控制 formArray.at(row)。 我们使用列的索引“i”为单选按钮赋值：dataValue[i]，当更改时为 formArray 赋值

我们不使用 mat-radio-group 并使用 mat-radio-button 的 [checked] 和 (checked) 属性 /event

如果你想使用 mat-table 是类似的

<table mat-table [dataSource]="formArray.controls">
  <ng-container
    *ngFor="let innerColumn of displayColumns;let i=index"
    [matColumnDef]="innerColumn"
  >
    <th mat-header-cell *matHeaderCellDef>{{'col '+row}}</th>
    <td mat-cell *matCellDef="let element;let row=index">
      <mat-radio-button
        [value]="dataValue[i]"
        [name]="'rd'+row"
        [checked]="formArray.at(row).value==dataValue[i]"
        (change)="formArray.at(row).setValue(dataValue[i])"
      ></mat-radio-button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayColumns;"></tr>
</table>

同样我们有两个索引“row”和“i”

你可以在stackblitz中看到

更新更具体。 如果想象我们有两个数组

  rows=[{value:1,name:'option 1'},
        {value:2,name:'option 2'}, 
        {value:1,name:'option 3'}]

  cols=[{value:10,description:'excelent'},
        {value:8,description:'good'},
        {value:3,description:'pour'},
        {value:1,description:'bad'}]

我们将其他变量联系起来，例如

  formArray=new FormArray(this.rows.map(x=>new FormControl(x.value)))

  displayColumns=this.cols.map(x=>x.description);
  allColumns=['name',...this.displayColumns]
  dataValue=this.cols.map(x=>x.value)

我也更新了stackblitz

更新两个不相关的

当我们想要生成依赖于一个或多个输入的“某物”时，我们不能使用 ngOnInit 否则我们创建 @Inputs 作为设置器，例如，如果依赖于两个输入

  //define outside
  QuestionOptions: IOption[] = [];
  @Input('QuestionOptions') _QuestionOptions(value: IOption[]){
     this.QuestionOptions=value;
     this.createGrid();
  }

  //idem with other Input

  //define outside
  question_setting: string = ''
  @Input('question_setting') _question_setting(value:string){
      this.question_setting=value;
      this.createGrid();
  }

  //finally our function createGrid
  createGrid()
  {
       if (this.QuestionOptions.length && this.question_setting){
             ...here we makes all the calculates...
       }
  }