Question

My Project在Angular 5中，我必须将API响应存储到Variable中。当我在subscribe中放置console.log时，它返回json数组，但没有console.log() subscribe()返回undefined。

我的代码

 export class GalleryComponent {
 private apiUrl = 'http://fullpath';
 private response: any;
 private data: any;
 private category: any;

 constructor(private http: HttpClient) {
   this.getCategory();
 }

 /*getCategory() {
  this.http.post(this.apiUrl, {}).subscribe(res => {
     console.log(this.response = res['result']['data']);
  });---------------------This returns JSON data from API successfully*/
 getCategory() {
   this.http.post(this.apiUrl, {}).subscribe(res => {
      this.response = res['result']['data'];
   });
   console.log(this.response);//------This returns undefined
   }
 }

我是Angular的新人。我怎么能解决这个问题。

Answer 1

试试这个：

<header class="app-header"> <div class="header-wrapper"> <a class="brand-logo" href="#Main"> <img src="./assets/images/logo-central-coffee.png"></a> <nav class="header-nav"> <a href="#About">About</a> <a href="#Menu">Menu</a> <a href="#Location">Location</a> </nav> <a id="open-menu" class="open-menu" href="#"> <span></span> <span></span> <span></span> </a> </div> </header> <aside id="offcanvas" class="offcanvas"> <div class="offcanvas-content"> <a id="close-btn" class="close-btn" href=""> <span></span> <span></span> </a> <a class="offcanvas-item" href="#About">About</a> <a class="offcanvas-item" href="#Menu">Menu</a> <a class="offcanvas-item" href="#Location">Location</a> </div> </aside> <main> <section id="Main" class="container"> <div class="overlay"></div> <div class="full-width"> <hgroup> <h1>Central Coffee</h1> <h3>Bespoke organically-sourced coffee</h3> </hgroup> </div> </section> <section id="About" class="block-wrapper"> <div class="container"> <div class="block-content text"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida, congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <div class="grid-row"> <div class="image-bg"></div> <div class="image-bg"></div> <div class="image-bg"></div> <div class="image-bg"></div> </div> </div> </div> </section> <section id="Menu" class="block-wrapper"> <div class="container"> <div class="block-content text"> <h2>Menu</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida, congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="grid-row"> <div class="grid-item"> <header>DRINKS</header> <img src="./assets/images/food-3249174_640.jpg"> <div> <p>La Catalina (Colombia)</p> <p>Guarumales (Ecuador)</p> <p>Rukondo (Rwanda)</p> <p>Peppermint Tea</p> <p>Black tea</p> </div> </div> <div class="grid-item"> <header>FOOD</header> <img src="./assets/images/coffee-3297326_640.jpg"> <div> <p>Frittata (Herb and Veggie, Italian, Corned Beef)</p> <p>Breakfast sandwich</p> <p>Cobb salad</p> <p>Various baked goods</p> </div> </div> </div> </div> </div> </section> <section id="Location" class="block-wrapper"> <div class="container"> <div class="block-content text"> <h2>Location</h2> <div class="grid-row"> <div class="grid-item"> <img src="./assets/images/map.png" alt=""> </div> <div class="grid-item"> <header>Hours</header> <p>Mon-Thurs -- 7am - 8pm</p> <p>Fri-Sun -- 8am - 10pm</p> </div> </div> </div> </div> </section> </main> <footer> @2018 Central Coffee</footer>来电是http，您需要在订阅中写asynchronous才能打印console.log。

response

Answer 2

subscribe的工作方式不受您放置console.log的位置的影响。您遇到此问题的原因是由于代码执行操作的异步性质。

getCategory()是一个包装http调用的函数，这就是你需要订阅返回值的原因。订阅主要是指：

去做你需要做的任何操作，当你完成后，执行订阅块内的东西。但是在我等待的时候，继续使用剩下的代码

因此，将console.log置于订阅之外意味着它将在异步操作完成之前执行。

Answer 3

http.post（）函数是异步的。您执行post函数，然后继续执行下一个语句。只有当服务器响应时，才会输入传递给http.post（）函数的回调函数。在第一种情况下，当您从服务器收到响应时，执行console.log语句。在第二种情况下，您的console.log（）将在执行http调用后立即执行，但在您从服务器获得响应之前。

subscribe（）在Angular 5中没有控制台的情况下返回undefined

我的代码

3 个答案: