我正在忙着一个angular4应用程序，我正试图使用 ngIf有条件地隐藏/显示两个div元素，结果非常奇怪 . 我想在newItem为false或null时显示项目表单，并在newItem为true时显示项表单 . 当newItem为true但是项目表单由于某种原因没有从dom中删除时，显示包含item表单的div ...我觉得角度很舒服并且已经使用了一段时间但从未来过这个问题？知道我做错了什么吗？我错过了一些非常简单的事吗？
HTML ：
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-push-4 page-header">
<h1>Quote generator</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-4" *ngIf="!newItem">
<button class="btn btn-primary pull-right" (click)="addItem()">Add Item</button>
<form [formGroup]="projectForm" role="form" (ngSubmit)="calculateTotal(projectForm.value)">
<div class="form-group">
<label for="pName">Project Name</label>
<input id="pName" class="form-control" placeholder="Enter project name" type="text" [formControl]="projectForm.controls['name']">
</div>
<div class="form-group">
<label for="markup">Markup(%)</label>
<input id="markup" class="form-control" placeHolder="Enter markup percentage" type="text" [formControl]="projectForm.controls['markup']">
</div>
<div class="form-group">
<label for="hCost">Hardware cost</label>
<input id="hCost" class="form-control" placeHolder="Enter hardware cost" type="text" [formControl]="projectForm.controls['hardwareCost']">
</div>
<div class="form-group">
<label for="lCost">Labour cost</label>
<input id="lCost" class="form-control" placeHolder="Enter labour cost" type="text" [formControl]="projectForm.controls['labourCost']">
</div>
<div class="form-group">
<label for="sCost">Sanding cost</label>
<input id="sCost" class="form-control" placeHolder="Enter sanding cost" type="text" [formControl]="projectForm.controls['sandingCost']">
</div>
<div class="form-group">
<label for="sdCost">Sundries cost</label>
<input id="sdCost" class="form-control" placeHolder="Enter Sundries cost" type="text" [formControl]="projectForm.controls['sundriesCost']">
</div>
<button class="btn btn-submit pull-right" [disabled]="!projectForm.valid || project.items.length < 1">Calculate</button>
</form>
</div>
<div class="col-md-4 col-md-push-4" *ngIf="newItem">
<form [formGroup]="itemForm" role="form" (ngSubmit)="addItem(itemForm.value)">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" Placeholder="Enter Item Name" [formControl]="itemForm.controls['name']">
</div>
<div class="form-group">
<label for="height">Height</label>
<input class="form-control" id="height" type="number" step="0.01" placeholder="Enter item height" [formControl]="itemForm.controls['height']">
</div>
<div class="form-group">
<label for="length">Length</label>
<input class="form-control" id="length" type="number" step="0.01" placeholder="Enter item length" [formControl]="itemForm.controls['length']">
</div>
<div class="form-group">
<label for="width">Width</label>
<input class="form-control" id="width" type="number" step="0.01" placeholder="Enter item width" [formControl]="itemForm.controls['width']">
</div>
<div class="form-group">
<label for="qty">qty</label>
<input class="form-control" id="qty" type="number" step="0.01" placeholder="Enter item Quantity" [formControl]="itemForm.controls['qty']">
</div>
<div class="form-group">
<label for="pcbm">Price/m<sup>3</sup></label>
<input class="form-control" type="number" step="0.01" placeholder="Enter item Price/cbm" [formControl]="itemForm.controls['priceM2']">
</div>
<button class="btn btn-block btn-submit" [disabled]="itemForm.valid">Add</button>
</form>
</div>
</div>
</div>
Typescript:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Item } from './models/item.model';
import { Project } from './models/project.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
itemsForm: FormGroup;
projectForm: FormGroup;
project: Project;
item: Item;
newItem: boolean = null;
showProject: boolean = true;
constructor(private fb: FormBuilder) {
this.itemsForm = fb.group({
'name': ['', Validators.required],
'height': ['', Validators.required],
'length': ['', Validators.required],
'Width': ['', Validators.required],
'qty': ['', Validators.required],
'priceM3': ['', Validators.required],
});
this.projectForm = fb.group({
'name': ['', Validators.required],
'markup': ['', Validators.required],
'hardwareCost': ['', Validators.required],
'labourCost': ['', Validators.required],
'sandingCost': ['', Validators.required],
'sundriesCost': ['', Validators.required]
});
}
calculateTotal(project: any) {
}
addItem() {
this.newItem = true;
}
ngOnInit() {
}
}
2 回答
您的错误与
ngIf无关 . 我在你的代码中看到了很多错误试试这个 ：
component.ts