Angular 迭代角度为4的对象数组

我想在订阅中交互数组对象

  export class AppComponent  implements OnInit {
      title = 'app works!';
      observableBooks: Observable<Book[]>
      books: Book[];
      newarray: any[];
      errorMessage: String;
      constructor(private bookService: BookService) { }
      ngOnInit(): void {
           this.observableBooks = this.bookService.getBooksWithObservable();
               this.observableBooks.subscribe(books => { 
             for (let entry of books) {
               // push the value into db
          }

         let retrivedata: Array<number> = //retrive the db collection again




                error =>  this.errorMessage = <any>error
              });

      }

    }

<ul *ngFor="let book of retrivedata | async">
      <li>{{book.price}}</li>
    </ul>

test.ts文件

  export class AppComponent  implements OnInit {
      title = 'app works!';
      observableBooks: Observable<Book[]>
      books: Book[];
      newarray: any[];
      errorMessage: String;
      constructor(private bookService: BookService) { }
      ngOnInit(): void {
           this.observableBooks = this.bookService.getBooksWithObservable();
               this.observableBooks.subscribe(books => { 
             for (let entry of books) {
               // push the value into db
          }

         let retrivedata: Array<number> = //retrive the db collection again




                error =>  this.errorMessage = <any>error
              });

      }

    }

<ul *ngFor="let book of retrivedata | async">
      <li>{{book.price}}</li>
    </ul>

导出类AppComponent实现OnInit{
title='appworks！'；
可观察的电子书：可观察的
书籍：书籍[]；
newarray:any[]；
错误消息：字符串；
构造函数（私有bookService:bookService）{}
ngOnInit（）：void{
this.obbservableboks=this.bookService.getBookWithObservable（）；
this.observebooks.subscribe（books=>{
对于（让我们输入书籍）{
//将值压入db
}
让retrievedata:Array=//再次检索数据库集合
error=>this.errorMessage=错误
});
}
}

test.html文件

  export class AppComponent  implements OnInit {
      title = 'app works!';
      observableBooks: Observable<Book[]>
      books: Book[];
      newarray: any[];
      errorMessage: String;
      constructor(private bookService: BookService) { }
      ngOnInit(): void {
           this.observableBooks = this.bookService.getBooksWithObservable();
               this.observableBooks.subscribe(books => { 
             for (let entry of books) {
               // push the value into db
          }

         let retrivedata: Array<number> = //retrive the db collection again




                error =>  this.errorMessage = <any>error
              });

      }

    }

<ul *ngFor="let book of retrivedata | async">
      <li>{{book.price}}</li>
    </ul>

{{book.price}}

我需要在HTML页面中迭代这个“arrayofObj”，这意味着角度模板页面更新：

我认为，如果我们让代码更干净一点，它应该看起来更像这样：

app.component.ts：

export class AppComponent implements OnInit {    
    books: Book[];
    errorMessage: string;
    constructor(private bookService: BookService) { }

    loadBooks() {
        this.bookService.getBooksWithObservable().subscribe(
            (res) => this.onSuccess(res.json),
            (res) => this.onError(res.json)
        );
    }

    ngOnInit() {
        this.loadBooks();
    }

    private onSuccess(data) {
        this.books = data;
    }
    private onError(error) {
        this.errorMessage = error.toString();
    }
}

HTML:

<div *ngFor="let book of books">
    <span>{{book.price}}</span>
</div>

{{book.price}}

更新：

我认为，如果我们让代码更干净一点，它应该看起来更像这样：

app.component.ts：

export class AppComponent implements OnInit {    
    books: Book[];
    errorMessage: string;
    constructor(private bookService: BookService) { }

    loadBooks() {
        this.bookService.getBooksWithObservable().subscribe(
            (res) => this.onSuccess(res.json),
            (res) => this.onError(res.json)
        );
    }

    ngOnInit() {
        this.loadBooks();
    }

    private onSuccess(data) {
        this.books = data;
    }
    private onError(error) {
        this.errorMessage = error.toString();
    }
}

HTML:

<div *ngFor="let book of books">
    <span>{{book.price}}</span>
</div>

{{book.price}}

您必须声明一个类变量来保存订阅“书籍”中获取的信息

您不能在视图上使用

let retrievedata:Array=//再次检索数据库集合

。您需要在类级别声明此变量。 看一看:

 export class AppComponent  implements OnInit {
  title = 'app works!';

  retrivedata: Array<object> = []; // your view variable has to be created in a class level

  observableBooks: Observable<Book[]>
  books: Book[];
  newarray: any[];
  errorMessage: String;

  constructor(private bookService: BookService) { }

  ngOnInit(): void {

       this.bookService.getBooksWithObservable().subscribe(books => { 
         books.forEach(entry => {
           this.retrievedata.push(entry);  //assign the data from subscription to your class variable
         }
      }

 }

导出类AppComponent实现OnInit{
title='appworks！'；
retrivedata:Array=[]；//必须在类级别创建视图变量
可观察的电子书：可观察的
书籍：书籍[]；
newarray:any[]；
错误消息：字符串；
构造函数（私有bookService:bookService）{}
ngOnInit（）：void{
this.bookService.getBooksWithObservable（）.subscribe（books=>{
books.forEach（条目=>{
this.retrievedata.push（entry）；//将订阅中的数据分配给类变量
}
}
}

那么在你看来,

<ul *ngFor="let book of retrivedata"> // use your class variable in your view
  <li>{{book.price}}</li>
</ul>

//在视图中使用类变量
{{book.price}}

您必须声明一个类变量来保存订阅“书籍”中获取的信息。

您不能在视图上使用

let retrievedata:Array=//再次检索db集合

。您需要在类级别声明此变量。 看一看:

 export class AppComponent  implements OnInit {
  title = 'app works!';

  retrivedata: Array<object> = []; // your view variable has to be created in a class level

  observableBooks: Observable<Book[]>
  books: Book[];
  newarray: any[];
  errorMessage: String;

  constructor(private bookService: BookService) { }

  ngOnInit(): void {

       this.bookService.getBooksWithObservable().subscribe(books => { 
         books.forEach(entry => {
           this.retrievedata.push(entry);  //assign the data from subscription to your class variable
         }
      }

 }

导出类AppComponent实现OnInit{
title='appworks！'；
retrivedata:Array=[]；//必须在类级别创建视图变量
可观察的电子书：可观察的
书籍：书籍[]；
newarray:any[]；
错误消息：字符串；
构造函数（私有bookService:bookService）{}
ngOnInit（）：void{
this.bookService.getBooksWithObservable（）.subscribe（books=>{
books.forEach（条目=>{
this.retrievedata.push（entry）；//将订阅中的数据分配给类变量
}
}
}

那么在你看来,

<ul *ngFor="let book of retrivedata"> // use your class variable in your view
  <li>{{book.price}}</li>
</ul>

//在视图中使用类变量
{{book.price}}

如果您想迭代一个数组，但您在

订阅

中，并且如果您正在使用forEach，则需要为

forEach

添加

此

参数以访问外部范围

示例：

this.observableBooks.subscribe(
   (books) =>  {
                   this.books = books;

                   //iterate over arrayofObj
                   books.forEach( (book) => {
                                              //this will work 
                                              this.arrayofObj.push({fname: this.book.name});
                                  }, this);
                   });

---

如果要迭代数组，但您在

subscribe

内，并且如果使用forEach，则需要为

forEach

添加

this

参数以访问外部范围

示例：

this.observableBooks.subscribe(
   (books) =>  {
                   this.books = books;

                   //iterate over arrayofObj
                   books.forEach( (book) => {
                                              //this will work 
                                              this.arrayofObj.push({fname: this.book.name});
                                  }, this);
                   });

试着这样做：

export class AppComponent implements OnInit {

    private retrivedata: Array<any> = [];

    title = 'app works!';
    observableBooks: Observable<Book[]>
    books: Book[];
    newarray: any[];
    errorMessage: String;
    constructor(private bookService: BookService) { }
    ngOnInit(): void {
        this.observableBooks = this.bookService.getBooksWithObservable();
        this.observableBooks.subscribe(books => {
            console.log('books', books);
            this.retrivedata = books;
            for (let entry of this.retrivedata) {
                console.log('entry', entry)
            }
        }, (error) => {
            this.errorMessage = <any>error
        })
    }

}

导出类AppComponent实现OnInit{
私有检索数据：数组=[]；
title='appworks！'；
可观察的电子书：可观察的
书籍：书籍[]；
newarray:any[]；
错误消息：字符串；
构造函数（私有bookService:bookService）{}
ngOnInit（）：void{
this.observebooks=this.bookService.getbookswithobserveable（）；
这个.observebooks.subscribe（books=>{
console.log（'books'，books）；
this.retrievedata=书籍；
for（让我们输入此。检索数据）{
console.log（'entry'，entry）
}
}，（错误）=>{
this.errorMessage=错误
})
}
}

试着这样做：

export class AppComponent implements OnInit {

    private retrivedata: Array<any> = [];

    title = 'app works!';
    observableBooks: Observable<Book[]>
    books: Book[];
    newarray: any[];
    errorMessage: String;
    constructor(private bookService: BookService) { }
    ngOnInit(): void {
        this.observableBooks = this.bookService.getBooksWithObservable();
        this.observableBooks.subscribe(books => {
            console.log('books', books);
            this.retrivedata = books;
            for (let entry of this.retrivedata) {
                console.log('entry', entry)
            }
        }, (error) => {
            this.errorMessage = <any>error
        })
    }

}

导出类AppComponent实现OnInit{
私有检索数据：数组=[]；
title='appworks！'；
可观察的电子书：可观察的
书籍：书籍[]；
newarray:any[]；
错误消息：字符串；
构造函数（私有bookService:bookService）{}
ngOnInit（）：void{
this.observebooks=this.bookService.getbookswithobserveable（）；
这个.observebooks.subscribe（books=>{
console.log（'books'，books）；
this.retrievedata=书籍；
for（让我们输入此。检索数据）{
console.log（'entry'，entry）
}
}，（错误）=>{
this.errorMessage=错误
})
}
}

我无法声明'arrayofObj'，我遇到以下错误

找不到名称'arrayofObj'

您需要将arrayofObj声明为类变量（就像您对books和errorMessage所做的那样）。它应该是arrayofObj:any[]；然后你用这个来访问它。arrayofObj在Ngoninit中你能编辑你的问题来显示你的ts文件和html中现在有什么吗？你是在使用

forEach

迭代书籍然后访问

arrayofObj

？我不理解你的代码，一些变量消失了。什么是RetrieveData和newarray？我是不确定这是否是您想要实现的，但是您不需要在订阅中使用for循环