替代或更好的方法* NgIf

嗨我有幾個*NgIf條件在我的模板。基於NgIf我在模板中顯示/渲染我的組件（不同類型的表單）。示例在我的功能之一（下）替代或更好的方法* NgIf

private _onClick(cell:any){ 
     this._enableView = false; 
     this._enableCreate = true; 
     this._enableDelete = false; 
     this._enableEdit = false; 
    }

這是爲了使我在模板中創建表單，並隱藏其他形式，如果它存在。但是這樣做對我來說感覺有點不對或多餘。有沒有更好的方法或建議，而不是這種方法？

來源

2017-04-20 blackdaemon

是什麼您查看（用'* ngIf's的樣子）？縮減你的孤立代碼並不能提供關於其目的的很多信息。 –

你能提供模板嗎？從我的理解你有不同的形式真正讓你的代碼真的很長。根據你提供的代碼，似乎你真正想要的是切換這個動作的按鈕而不是整個表格 – brijmcq

我不確定是好還是壞，但是您可以擁有一個州屬性，例如this.state，包含字符串：

private _onClick(cell:any){ 
    this.state = 'create' 
}

HTML

<div *ngIf="state == 'create'"> 
    // create form 
</div> 
<div *ngIf="state == 'view'"> 
    // view form 
</div> 
<div *ngIf="state == 'edit'"> 
    // edit form 
</div> 
<div *ngIf="state == 'delete'"> 
// delete form 
</div>

所以你更換你的代碼的一部分爲模板，我希望它能減少你的js代碼庫

來源

2017-04-20 06:19:35 Leguest

這聽起來像一個合理的方法，但我會建議使用更具描述性的變量和枚舉而不是普通的字符串。如果他們的標記與您的示例相似，那麼作者可能會考慮ngSwitch。如果這個組件試圖做太多，甚至可能需要將模板分解成不同的子組件。 – Christopher

是的，我也在想枚舉，但我不記得打字稿是否支持它們。所以你也是對的 – Leguest

它確實！ https://www.typescriptlang.org/docs/handbook/enums.html – Christopher

如果可以像Leguest建議的那樣有一個單獨的狀態，我會推薦ngswitch像這樣使用：

// Syntax for ngSwitch 
<div [ngSwitch]="state"> 
    <div *ngSwitchCase="'create'"> ... </div> 
    <div *ngSwitchCase="'view'"> ... </div> 
    <div *ngSwitchCase="'edit'"> ... </div> 
    <div *ngSwitchCase="'delete'"> ... </div> 
    <div *ngSwitchDefault> ... </div> 
</div>

否則，如果您使用的角度4.x中您可以利用的ngIf else：

// Syntax for ngIf/Else 
<div *ngIf=」condition; else elseBlock」>Truthy condition</div> 
<template #elseBlock>Falsy condition</template>

來源

2017-04-20 06:32:06

替代或更好的方法* NgIf

回答

相關問題