角度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>