Question

我正在尝试使用带有Angular 4的MEAN STACK在我的Angular UI上显示MongoDb集合中的文档（我是这项技术的新手）

Html代码：Admin.component.html

 <div class="table">
            <table>
                <thead>
                    <tr>
                        <th>TrainingName</th>
                        <th>Description</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of items">
                        <td>{{ item.trainingName }}</td>
                        <td>{{ item.description }}</td>
                        <td><button (click)="deleteitem(item._id)">Delete</button></td>
                    </tr>
                </tbody>
            </table>
    </div>

typescript代码：admin.component.ts

export class AdminFormComponent implements OnInit {
   private apiError= '';
   private items ='';

  constructor(
    private dataService: DataService
  ) {}

  ngOnInit() {
     this.newSession = SessionDetails.CreateDefault();
     this.getFormdetails();
    }

getFormdetails()
{
  this.dataService
  .getUsers()
  .subscribe(
    details=>this.items= details,
    err => this.apiError = err
  )
}
}

的DataService：

getUsers():Observable<any> {
    return this.http.get("http://localhost:3000/all")
      .map(result => this.result = result.json());
    }

http://localhost:3000/all正在从mongo db collection返回文档集。但我无法在我的角度UI.i.e上看到输出。项目的值未显示。

Answer 1

您可以在此处将项目初始化为字符串。

private items ='';

改为写

private items: any;

Answer 2

private items: any[]= [];

你可以尝试

let item of items; let i = index

Answer 3

使用这样做检查您是否从数据库获取数据。您的items变量也不是数组。

getUsers():Observable<any> {
    return this.http.get(url)
        .map(this.extractData)
        .do(data => console.log('data: ' + JSON.stringify(data)))
        .catch(this.handleError);
}
private handleError(error: Response): Observable<any> {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

ng不在UI上显示表中的值

3 个答案: