角2：ngIf不是一個子組件

我上創建具有兩個輸入一個組件工作中的工作是一個數字，一個是文本如下：角2：ngIf不是一個子組件

<div class="form-group" *ngIf="inputType=='text'"> 
     <input class="form-control" type="text" > 
    </div> 
    <div class="form-group" *ngIf="inputType=='number'"> 
     <input class="form-control" type="number"> 
    </div>

和.ts文件：

@Component({ 
    selector: 'app-form-elemnt-validation', 
    templateUrl: './form-elemnt-validation.component.html', 
    styleUrls: ['./form-elemnt-validation.component.css'] 
}) 
export class FormElemntValidationComponent implements OnInit { 

    constructor() { } 
    inputType="text"; 
    ngOnInit() { 

    } 

}

但ngIf即使將條件更改爲true並且沒有任何兩個輸入出現，也不起作用！

請注意，此組件在另一個組件內部使用。其中也使用了第三部分。

ReceivedPaymentsPage SubmitPaymentsComponent FormElemntValidationComponent

和.module文件聲明：

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild(routes), 
    SearchModule, 
    FormsModule 
    ], 
    declarations: [ 
    ReceivedPaymentsPage, 
    InvoiceShowDataComponent, 
    ReceivedPaymentsTableComponent, 
    SubmitPaymentsComponent, 
    FormElemntValidationComponent 
    ] 

})

任何人知道爲什麼ngIf不是在這種情況下工作？

來源

2017-08-11 أسامة حمدان

它按預期工作，問題可能在其他位置？請參閱此鏈接：https://plnkr.co/edit/KSWPYD3mhJgmdYJfwgH5?p=preview – Faisal

您是否在app.component.ts文件中導入了FormsModule。 –

yes FormsModule被導入到包含這個組件聲明的模塊中 –

這可以請有看看這個Plunker link

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <h2>Hello {{name}}</h2> 
     <cart></cart> 
     </div> 
    `, 
    }) 
    export class App { 
    name: string; 
    constructor() { 
     this.name = `Angular! v${VERSION.full}` 
    } 
    } 

    @Component({ 
    selector: 'cart', 
    template: ` <div class="form-group" *ngIf="inputType=='text'"> 
     <input class="form-control" placeholder='Text' type="text" > 
     </div> 
     <div class="form-group" *ngIf="inputType=='number'"> 
      <input class="form-control" placeholder='Number' type="number"> 
     </div><button (click)='changeText()'>change</button>` 
    }) 

    export class Cart { 
    inputType = 'text' 
    construtor() { 

    } 
    changeText() { 
     this.inputType = 'number' 
    } 
    }

這將工作

來源

2017-08-11 08:25:30

看來你的問題與你的組件模塊結構，我建議刪除這個組件並在它的父目錄下創建它在同一個目錄中。

來源

2017-08-11 11:37:23 mohammad

謝謝你是這個問題，謝謝你的幫助 –

角2：ngIf不是一個子組件

回答

相關問題