如何将@angular/platform-b​​rowser 添加到材质弹出对话框

Question

我正在尝试在材料设计弹出窗口中实现用户列表，但我不断收到此错误：

无法绑定到“ngForOf”，因为它不是“ion-list”的已知属性。

经过进一步研究，这似乎是由于未从 '@angular/platform-b​​rowser' 导入 import { BrowserModule }; 进入组件的模块。问题是这是一个弹出对话框，它没有 ngModule。我将如何导入 import { BrowserModule } from '@angular/platform-b​​rowser'; 到这个组件？

这里是组件：

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 {}

Answer 1

不是@angular/platform-browser，需要导入IonicModule。为此，您需要使用 @NgModule 装饰器为该组件创建模块文件：

在组件的文件夹中，只需创建一个新的 .ts 文件，通常是 .module.ts。这个模块文件会告诉你关于你的组件和它所依赖的库的角度。

@NgModule(
    {
        declarations:[SearchDialogComponent],

        imports:[IonicModule,
        CommonModule],

        entryComponents:[SearchDialogComponent],

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