Angular 8 нгПри использовании внутреннего интерфейса API - PullRequest
Новая
       48

Angular 8 нгПри использовании внутреннего интерфейса API

0 голосов
/ 29 января 2020

Я новичок в angular, мне нужно показать и скрыть некоторый контент в зависимости от параметра, взятого из серверной части. Поэтому я пытаюсь использовать ngIf, но он не работает должным образом. Вот код компонента 

export class HeaderComponent implements OnInit, OnDestroy {

    private subscriptions: Subscription = new Subscription()

    public isTest: string // I set here the variable

    @Input() sidebar = true
    @Input() menu = false
    @Input() client: Client
    @Output() private openMenuEvent = new EventEmitter()
    @Output() private logoutEvent = new EventEmitter()
    @Output() private toggleSidebarEvent = new EventEmitter()

    constructor(
        private renderer: Renderer2,
        private storeService: StoreService,
        private apiService: ApiService
    ) { }

    ngOnInit() {
        this.apiService.getClient().subscribe(client => {
            this.isTest = client.broker.brokerCode // object property I need to access
            console.log(this.isTest)
            console.log(client)
        })
    }
}

Затем в файле html 

<div class="d-flex justify-content-center align-items-center logo position-absolute h-100 w-100"
        [ngClass]="{'sidebar-visibile': sidebar, 'sidebar-hidden': !sidebar}">
        <img src="../../assets/images/img1.svg" height="48" width="100" class="mr-sm-3">
        <img src="../../assets/images/img2.png" height="48" width="100" class="ml-3 d-none d-sm-block" *ngIf='isTest'> <!-- content to hide or show -->
    </div>

Параметр, который я использую, иногда равен нулю, поэтому, когда он равен нулю, я должен скрыть содержимое иначе покажи это. NgIf не работает правильно, и я не понимаю, где я делаю ошибку

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Я решил это. Проблема была в логике c, которую я использовал в файле машинописи. 


    ngOnInit() {
            this.apiService.getClient().subscribe(client => {
                this.isTest = client.broker // object property I need to access
                if (this.isTest === null) {
                    return this.isTest
                } else {
                    return this.isTest
                }
            })
        }

И в файле html 

<div class="d-flex justify-content-center align-items-center logo position-absolute h-100 w-100"
        [ngClass]="{'sidebar-visibile': sidebar, 'sidebar-hidden': !sidebar}">
        <img src="../../assets/images/img1.svg" height="48" width="100" class="mr-sm-3">
        <img src="../../assets/images/img2.png" height="48" width="100" class="ml-3 d-none d-sm-block" *ngIf='isTest !== null'> <!-- content to hide or show -->
    </div>
0 голосов
/ 29 января 2020

изменить тип isTest на любой опубликованный c isTest: любой

...