2017-10-09 99 views
0

我有這個組件的代碼(我剛拋出這個錯誤所需要的代碼):我這個模板代碼角材料單選按鈕經過

import { 
     Component, 
     OnInit, 
     ChangeDetectorRef 
    } from '@angular/core'; 

@Component({ 
    /**/ 
}) 
export class ManageUsersComponent implements OnInit { 

    public dataSource: UserDataSource | null; 
    public users: IUser[] = []; 
    public metadata: Metadata[] = []; 
    public displayedColumns = [ 
    'lastname', 
    'firstname', 
    'email', 
    'administrator', 
    'advancedUser', 
    'collaborator', 
    'actions' 
    ]; 

    constructor(private cdr: ChangeDetectorRef) {} 

    onChange(): void { 
     this.cdr.detectChanges(); 
    } 

    ngOnInit(): void { 
     this.dataSource = null; 

    // Get users from server 
    this.userService.getUsers().subscribe(response => { 

     let _users = response.users; 
     this.metadata = response.metadata; 

     for (let i = 0; i < _users.length; i++) { 
      this.users.push(_users[i]); 
     } 

     // Set data table source 
     this.dataSource = new UserDataSource(this.users); 

    }, errorResponse => { 
     console.log(errorResponse); 
    }); 
    } 
} 

<ng-container matColumnDef="administrator"> 
     <mat-header-cell *matHeaderCellDef> Administrateur </mat-header-cell> 
     <mat-cell *matCellDef="let user"> 
      <mat-radio-button color="primary" 
          name="radio_{{user.id}}" 
          checked="true" 
          value="ROLE_ADMIN" 
          (change)="setRoles($event, user)"> 
     </mat-radio-button> 
     {{user.authorities[0]?.name == 'ROLE_ADMIN'}} <!-- This is true --> 
    </mat-cell> 
</ng-container> 

但我得到這個錯誤:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'false' 

我讀過有關這個錯誤,但不明白我怎麼能修復它在此背景下。這是一個視圖,我只是從材料設計中更改已檢查的屬性。

問題在於checked屬性。

任何人都可以幫助我嗎?

比你提前。

最好的問候,馬塞洛

回答

0

嘗試注入ChangeDetectionRef到組件

constructor(private cdr: ChangeDetectionRef) { 
} 

onChange(): void { 
    this.val += 1; // <- get error after 
    this.cdr.detectionChanges(); 
} 

或者從您的main.ts文件

+0

喜致電enableProdMode()。我已經更新了我最初的問題。我已經嘗試過,但仍然有錯誤。至少在4.3.1版中,這個'ChangeDetectionRef'應該是'ChangeDetectorRef'。謝謝。 – lmarcelocc