时间戳

首页 > 解决方案 > 如何加载选定的检查垫选择列表

angular - 如何加载选定的检查垫选择列表

问题描述

在反应角度形式中带有检查的选择列表，我如何显示已经选择的检查？

html：

<mat-list-item>

                  <mat-selection-list formControlName="documents" disabled multiple >
                    <mat-list-option checkboxPosition="before" *ngFor="let document of setDocuments"
                                     [value]="document.codigo">
                      {{document.descripcion}}
                    </mat-list-option>
                  </mat-selection-list>
                </mat-list-item>

要查看操作的详细信息，请加载以下表单控件：

details(){

   let obj = this.data.objeto;
    let documents = obj.codigoSet;
    const usingSplit = documents.split(';');
    documents: new FormControl(usingSplit)
}

我进行了拆分，因为服务将文档代码作为字符串返回，在那里我将其转换为数组，但它们未显示为选中

  <mat-list-item>

                  <mat-selection-list formControlName="documents" disabled multiple >
                    <mat-list-option checkboxPosition="before" *ngFor="let document of setDocuments"
                                     [value]="document.codigo" [selected]="selectList">
                      {{document.descripcion}}
                    </mat-list-option>
                  </mat-selection-list>
                </mat-list-item>

尝试添加属性 [selected] 并创建一个变量布尔“selectList”并调用所有文档的服务并与我拥有的代码进行比较，但是当尝试将该答案分配给变量 selectList 时，它给了我错误

  selectList:boolean;


export class Document  {


details(){

   let obj = this.data.objeto;
    let documents = obj.codigoSet;
    const usingSplit = documents.split(';');

  this.setForView.subscribe( data =>{
         data.map((item) => ({
        ...item,

        this.selectList: usingSplit.some((el) => // error
          el === item.codigo
        )
      }));
      }
    );
    documents: new FormControl(usingSplit)
}


}

我认为将我拥有的列表与服务的响应进行比较是解决方案，但我找不到方法。

标签： angularangular-materialangular-forms

解决方案

mat-selection list multiple 存储一个数组，所以你唯一需要的就是给formControl赋值。但是这个值需要是一个数组（请不要和FormArray混淆）

如果您的数据变得像，例如

data={documents:"1;2;5"} //documenst is a string

你简直

documents:new FormControl(data.documents.split(";"))

推荐阅读