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

Question

给大家，我是 Angular 的新手，我发现以下问题试图将 div 及其内容隐藏到视图中。我正在尝试使用本教程中解释的 NgShow 指令：https://scotch.io/tutorials/how-to-use-ngshow-and-nghide

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

<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[ 的布尔变量的值=39=]定义到相关控制器class.

然后我有前一个视图的控制器 class，名为 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; ............................................................... ............................................................... ............................................................... } ......................................................... ......................................................... ......................................................... }

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

问题是这个 div 仍然显示在页面上。

为什么？怎么了？我错过了什么？我该如何解决这个问题？使用 ng-show 是正确的做法吗？

Answer 1

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

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

隐藏

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

Answer 2

ng-show and ng-hide are supported from Angular v1.x.x but in your code you're using an Angular version higher than 1 which ng-show/ng-hide are not supported.

改为使用 [hidden] or *ngIf 来显示和隐藏您的 div

示例：

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

or 

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

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

Why ng-show is not hiding a div and its content into my page?

angular

angular-directive

javascript-framework

ng-show