来自* ngIf的奇怪行为

Question

我正忙着使用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>

打字稿：

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() {

    }

}

Answer 1

您的错误与ngIf无关。我在你的代码中看到了很多印刷错误

itemsForm => itemForm 
Width => width 
priceM3 => priceM2

Answer 2

试试这个：

<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['priceM3']">
                </div>
                <button class="btn btn-block btn-submit" [disabled]="itemForm.valid">Add</button>
            </form>         
        </div>
    </div>
</div>

<强> component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    itemForm: FormGroup;
    projectForm: FormGroup;
    project: any;
    item: any;
    newItem: boolean = false;
    showProject: boolean = true;


    constructor(private fb: FormBuilder) {
        this.itemForm = 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() {

    }

}