Ionic Angular ngIF无法在组件内部工作

vulvrdjw 于 2023-08-01 发布在 Ionic

关注(0)|答案(5)|浏览(152)

我有一个名为header的组件，但在它里面我的ngIf不工作，我不知道为什么...

header.ts

  @Input() title: string;
  @Input() subTitle: string;
  @Input() isPage: string;

字符串
header.html

<header>

  <div>
   //this *ngif does not work, if its 'yes' it hide the element and if i set to 'no' still hide
    <ion-buttons *ngIf="isPage === 'yes' " slot="start" (click)="goBack()" style="margin-left: 0.5em;">
      <ion-button>
        <ion-icon name="chevron-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

  </div>

  <div>
    // this work
    <h2>{{title}}</h2>
    <h1>{{subTitle}}</h1>
  </div>

</header>

型
otherComponent.ts

<ion-content>
  <app-header title="lorum" subTitle="ipsum" isPage="yes" ></app-header>
</ion-content>

型

ionic-framework

来源：https://stackoverflow.com/questions/60837296/angular-ngif-not-working-inside-component

5条答案

按热度按时间

af7jpaap1#

您应该使isPage为布尔值，并像下面这样传递输入

<app-header [isPage]="true"></app-header>

字符串
我创建了一个StackBlitz示例

赞(0）回复(0）举报 2023-08-01

bnlyeluc2#

为什么使用isPage作为字符串？最好使用boolean
然后你把代码改成

@Input() isPage: Boolean;

字符串
还有

<ion-buttons *ngIf="isPage" slot="start" (click)="goBack()" style="margin-left: 0.5em;">

型
还有

<app-header [title]="lorum" [subTitle]="ipsum" [isPage]="true" ></app-header>

型

赞(0）回复(0）举报 2023-08-01

mo49yndu3#

在另一个组件中，应该将isPage的值赋给一个变量，如const isPage =“yes”; 那就这么做<app-header [title]="App" [subTitle]="header" [isPage]=isPage>`个

赞(0）回复(0）举报 2023-08-01

7y4bm7vi4#

对于其他有问题的人来说，上面的CommonModule解决方案并不适用于他们。
我也遇到了同样的问题，因为我创建了一个新的组件，里面有一个嵌入式*ngIf，这个组件运行的是一个内部类变量，这些变量是由ngOnChanges()方法内部的逻辑派生的。我所做的任何事情都不允许ngIf不呈现组件。
修复它的是我不得不杀死我的ng serve并重新启动我的angular dev服务器。一旦我这样做了，*ngIf就开始正确渲染了。
¯_（）_/¯

赞(0）回复(0）举报 2023-08-01

v1uwarro5#

我也有同样的问题。Angular没有很好地构建，因为在新组件中使用内置指令时存在未记录的干扰。对于一个应该快速成功地编译和部署的脚本来说，这就够了。真可惜

import { Component,Input} from '@angular/core';
import {YearSuperContainer,Wrapper } from '../year-employee-model/year-employee-model';

@Component({
  selector: 'app-state-displayer',
  templateUrl: './state-displayer.component.html',
  styleUrls: ['./state-displayer.component.css']
})

export class StateDisplayerComponent 
{
    
    @Input() wrapper:Wrapper;
    visibleFlag:boolean = true;
    constructor()
    {
    }
    
    
}

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

Ionic Angular ngIF无法在组件内部工作

5条答案

相关问题

热门标签

最新问答