角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不是一个子组件

回答

相关问题