角度2 - 复选框列表的初始状态

Question

我是新来的Angular :)我试图设置复选框的初始状态。 我有一个帖子和类别，其中一些已经分配到该帖子。当我导航到帖子编辑页面时，有一个所有类别的列表，我可以选择/取消选择。我试图实现的是，在init中检查某些复选框（已分配给帖子的类别）。 这是我有：

//document-edit.component.html 
<div *ngFor="let category of categories"> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" 
        [checked]="checkIfCategoryAssigned(category.documents, document.id)" 
        (change)="onChange(category.id, category.name, $event.target.checked)"> {{category.name}} 
     </label> 
    </div> 
</div> 

// document-edit.component.ts 
checkIfCategoryAssigned(categoryDocuments, documentId) { 
    for (let document of categoryDocuments) { 
     if (document.id === documentId) { 
      console.log('true'); 
      return true; 
     } 
    } 
} 

这似乎是工作，但问题是，函数被调用每鼠标移动！我读过我应该使用Observable，但我不知道如何。 Angular文档不包含这种特殊情况。

Answer 1

如果你想要做检查默认情况下，只要在页面加载后，你可以创建一个变量，并设置默认为真在你的组件，然后像下面应该工作：

组件：

public isUser: boolean = true; 
public isAdmin: boolean =false; 

在您的htlml：

<div class="form-group row"> 
    <label class="col-md-3 form-control-label" for="roles">Roles</label> 
    <div class="col-md-4" > 
    <label class="col-md-3 form-control-label" for="isUser"> 
    <input type="checkbox" class="form-control" name="isUser" [(ngModel)]="isUser" #isuser="ngModel">Can Login</label> 
    </div> 
    <div class="col-md-4"> 
    <label class="col-md-3 form-control-label" for="isAdmin"> 
    <input type="checkbox" class="form-control" name="isAdmin" [(ngModel)]="isAdmin" #isadmin="ngModel">Is Admin</label> 
    </div> 
</div> 

如果要加载基于保存的值，你可以使用快照数据，并完成类似在组件如下：

ngOnInit(): void { 
     this.user = this.route.snapshot.data['user']; 
     this.isUser = this.user.roles.includes('user'); 
     this.isAdmin = this.user.roles.includes('admin'); 
} 

（我使用的是相同的HTML文件这两个例子）

Answer 2

好的，我结束了这一点。似乎是一个更好的方法：

import {Component, OnInit} from '@angular/core'; 
import {ActivatedRoute, Params} from '@angular/router'; 
import {Location} from '@angular/common'; 
import 'rxjs/add/operator/switchMap'; 
import {Observable} from 'rxjs/Rx'; 
import {DocumentService} from './document.service'; 
import {AlertService} from '../alert/alert.service'; 

@Component({ 
    selector: 'document-edit', 
    templateUrl: './document-edit.component.html', 
}) 

export class DocumentEditComponent implements OnInit { 

    public document: any; 
    public categories: any; 
    public categoriesArray: Array<{id: number, name: string}> = []; 

    constructor(
     private documentService: DocumentService, 
     private alertService: AlertService, 
     private route: ActivatedRoute, 
     private location: Location 
    ) {} 

    ngOnInit(): void { 
     this.route.params 
      .switchMap((params: Params) => this.documentService.getDocument(+params['id'])) 
      .subscribe(document => this.document = document); 
     this.getCategories(); 
    } 


    /* 
    * Push categories already assigned to this document 
    * to an array used in updateDocument method 
    * and check already assigned categories in the template. 
    */ 
    documentCategories(document: any, categories: any) { 
     for (let documentCategory of document.categories) { 
      this.categoriesArray.push({id: documentCategory.id, name: documentCategory.name}); 
     }   
     for (let category of categories) { 
      for (let categoryDocument of category.documents) { 
       if (categoryDocument.id === document.id) { 
        category.checked = true; 
       }     
      } 
     } 
    } 

    onChange(id: number, name: string, isChecked: boolean) { 
     if (isChecked) { 
      if (this.categoriesArray.some(x => x.name === name)) { 
       return; 
      } else { 
       this.categoriesArray.push({id: id, name: name}); 
      } 
     } else { 
      let index: number = this.categoriesArray.indexOf(this.categoriesArray.find(x => x.name === name)); 
      this.categoriesArray.splice(index, 1); 
     } 
     return this.categoriesArray; 
    } 

    updateDocument(id: number, title: string, body: any) { 
     let document = {id: id, title: title, body: body, categories: this.categoriesArray}; 
     this.documentService.updateDocument(document).subscribe(
      data => { 
       this.alertService.success('Document updated.'); 
       return true; 
      }, 
      error => { 
       this.alertService.error("Error updating document! " + error); 
       return Observable.throw(error); 
      } 
     ); 
    } 

    getCategories() { 
     this.documentService.getCategories().subscribe(
      data => {this.categories = data}, 
      err => console.error(err), 
      () => this.documentCategories(this.document, this.categories) 
     ); 
    } 

    goBack(): void { 
     this.location.back(); 
    } 

} 

模板：

<form> 
    <div class="row"> 
     <div class="col-md-8"> 
      <div class="form-group"> 
       <label for="document-title">Title</label> 
       <input type="text" 
         class="form-control" 
         id="document-title" 
         name="document-title" [(ngModel)]="document.title"> 
      </div> 
      <div class="form-group"> 
       <label for="document-body">Body</label> 
       <simple-tiny 
        name="document-body" 
        elementId="document-body" 
        [(ngModel)]="document.body"> 
       </simple-tiny> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <label>Categories</label>       
      <div *ngFor="let category of categories"> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox" 
           [checked]=category.checked 
           (change)="onChange(category.id, category.name, $event.target.checked)"> {{category.name}} 
        </label> 
       </div> 
      </div> 
     </div>       
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button type="submit" 
        class="btn btn-default" 
        (click)="updateDocument(document.id, document.title, document.body)"> 
        Submit 
      </button> 
     </div> 
    </div> 
</form>