Блог

Главная - Вопросы по программированию - Как добавить @angular / platform-browser во всплывающее диалоговое окно материала

Как добавить @angular / platform-browser во всплывающее диалоговое окно материала

#angular #typescript #ionic-framework #material-design

#angular #typescript #ionic-framework #материал-дизайн

Вопрос:

Я пытаюсь реализовать список пользователей во всплывающем окне material design, но я продолжаю получать эту ошибку:

Не удается привязаться к ‘NgForOf’, поскольку это неизвестное свойство ‘ion-list’.

После дальнейших исследований выясняется, что это вызвано тем, что не импортируется import { BrowserModule } из ‘@angular / platform-browser’; в модуль компонента. Проблема в том, что это всплывающее диалоговое окно, и в нем нет NgModule . Как мне импортировать import { BrowserModule } из ‘@angular / platform-browser’; в этот компонент?

вот компонент:

 import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { AlertController } from '@ionic/angular';
import { GroupService } from '../services/groups/group.service';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({
  selector: 'app-search-dialog',
  templateUrl: './search-dialog.component.html',
  styleUrls: ['./search-dialog.component.scss'],
})
export class SearchDialogComponent implements OnInit {
  sampleArr = [];
  resultArr = [];
  groupInfo: any;

  constructor(public dialogRef: MatDialogRef<SearchDialogComponent>,
              public afs: AngularFirestore,
              private groupSvc: GroupService,
              private alertController: AlertController) { }

  ngOnInit() {}

  search(event) {
    this.sampleArr.length = 0;
    let searchKey: string = event.target.value;
    let firstLetter = searchKey;

    if (searchKey.length === 0) {
      this.sampleArr = [];
      this.resultArr = [];
      console.log('searchKey', searchKey.length);
      console.log('this.sampleArr', this.sampleArr);
    }

    if (this.sampleArr.length === 0) {
      console.log('searchKey', searchKey.length);
      console.log('this.sampleArr', this.sampleArr);
      this.afs.collection('users', ref => ref
      .where('displayName', '>=', firstLetter)
      .where('displayName', '<=', firstLetter   'uF7FF')
      .orderBy('displayName'))
        .snapshotChanges().subscribe(data => {
          data.forEach(childData => {
            this.sampleArr.push(childData.payload.doc.data());
          });
        });
    }
  }

  onNoClick(): void {
    this.dialogRef.close();
  }
}  
 <ion-content padding>
  <ion-searchbar style="background-color: white; color: black;" (ionInput)="search($event)"></ion-searchbar>

  <ion-list *ngFor="let user of sampleArr" (click)="sendUserRequest(user)">
    <ion-avatar style="padding-right: 10px;">
      <img [src]="user.profilePic" alt="" srcset="">
    </ion-avatar>
    <ion-label>
      <ion-note style="font-weight:bold; color: black;">
        Send request to
      </ion-note>  
      <ion-note style="font-weight:bold; color: black;">
        {{user.displayName}}
      </ion-note>  
    </ion-label>
  </ion-list>
</ion-content>

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

Я добавил файл NgModule в папку компонента поиска, но все еще сталкиваюсь с той же проблемой:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from 'src/app/material.module';
import { SearchDialogComponent } from './search-dialog.component';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    IonicModule,
    MaterialModule,
  ],
  declarations: [SearchDialogComponent],
  entryComponents: [SearchDialogComponent],
  exports: [SearchDialogComponent]
})
export class SearchDialogModule {}

Ответ №1:

Это не то @angular/platform-browser , что вам нужно импортировать IonicModule . Для этого вам необходимо создать файл модуля для этого компонента с @NgModule помощью декоратора:

Внутри папки вашего компонента просто создайте новый файл .ts, обычно .module.ts. Этот файл модуля сообщит angular о вашем компоненте и библиотеках, от которых он зависит.

 @NgModule(
    {
        declarations:[SearchDialogComponent],

        imports:[IonicModule,
        CommonModule],

        entryComponents:[SearchDialogComponent],

        exports: [SearchDialogComponent]
    })
export class SearchComponentModule{}

Комментарии:

1. Я все еще получаю сообщение об ошибке после добавления модуля. Я обновлю сообщение, чтобы показать NgModule, который я добавил @pankaj

2. Импортировали ли вы SearchDialogModule в файл .module.ts, в котором вы вызываете модальный / компонент. Вам необходимо импортировать это в ваш файл <page>.module.ts

3. На самом деле мне пришлось импортировать SearchComponentModule в основной модуль моих приложений, и это сработало