Question

大家好，我在 Angular 中非常陌生，并且在尝试将div及其内容隐藏到视图中时发现以下问题。我试图按照本教程中的说明使用 NgShow 指令：https://scotch.io/tutorials/how-to-use-ngshow-and-nghide

我有以下情况。在组件中，我有一个名为 mail-datail-protocollo-sidebar.component.html 的视图。它包含一个我已在其上设置 ng-show 指令的div，如下所示：

<div class="info-box" ng-show="showSelectAOOUORLists">
    <div class="title-box">Lista AOO</div>
    <p-dropdown placeholder="Selezionare un AOO"
                [options]="aooList"
                [(ngModel)]="selectedAoo"
                optionLabel="Name"
                (onChange)="onChangeAoo($event)">
    </p-dropdown>

    <div *ngIf="selectedAoo">
        <div class="title-box" style="margin-top: 20px;">Lista UOR</div>
        <p-dropdown placeholder="Selezionare un reparto relativo all'AOO selezionato"
                    [options]="uorList"
                    [(ngModel)]="selectedUor"
                    optionLabel="UnitaOperativaResponsabile">
        </p-dropdown>
    </div>


    <div style="margin-top: 28px; width: 30%">
        <button *ngIf="selectedUor"
                type="button"
                pButton icon="fa-stamp"
                label="Invia al protocollo"
                (click)="inviaProtocollo($event)"></button>
    </div>

</div>

如您所见，我设置了 ng-show =“ showSelectAOOUORLists” ，因此从理论上讲，它应使用定义在相关控制器类中的名为 showSelectAOOUORLists 的布尔变量的值

然后，我有了上一个视图的控制器类，名为mail-datail- protocollo-sidebar.component.ts ，其中包含用于显示或隐藏上一个div的布尔变量：

@Component({
    selector: 'mail-detail-protocollo-sidebar',
    templateUrl: '/app/maildetail/mail-detail-protocollo-sidebar/mail-datail-protocollo-sidebar.component.html',
    styleUrls: ['../../app/maildetail/mail-detail-protocollo-sidebar/mail-detail-protocollo-sidebar.component.css']
})
export class MailDetailProtocolloSidebarComponent implements OnInit {

    showSelectAOOUORLists: boolean;
    .........................................................
    .........................................................
    .........................................................

    constructor(
        private mailsService: MailsService,

        private mailDetailProtocolloService: MailDetailProtocolloService
    ) { }

    ngOnInit(): void {
        this.showSelectAOOUORLists = false;
        ...............................................................
        ...............................................................
        ...............................................................
    }

    .........................................................
    .........................................................
    .........................................................
}

因此，如您所见，基本上，现在我将 showSelectAOOUORLists 变量的值设置为 false （放入 ngOnInit（），因此从理论上讲，在呈现页面之前）可以隐藏div及其内容。

问题在于此div仍显示在页面上。

为什么？怎么了？我想念什么？如何解决此问题？使用 ng-show 是正确的方法吗？

Answer 1

ng-show在angularJs组件中。您需要使用*ngIf或[hidden]来简化angular 2中的ngShow功能。

<div class="info-box" *ngIf="showSelectAOOUORLists">

隐藏

<div class="info-box" [hidden]="!showSelectAOOUORLists">

Answer 2

Angular v1.xx支持
ng-show和ng-hide ，但是在您的代码中，您使用的Angular版本高于1，但不支持ng-show / ng-hide。

使用[hidden] or *ngIf来显示和隐藏div

示例：

<div class="info-box" [hidden]="!showSelectAOOUORLists">

or 

<div class="info-box" *ngIf="showSelectAOOUORLists">

为什么ng-show不会将div及其内容隐藏到我的页面中？

2 个答案: