title: Angular 8 not displaying array
body: <p>I'm working on a project that has 10 object in an array. An object will be displayed in the component html, and on every click the next object in the array will be displayed.  </p>
  
  <pre><code>send = [ 
  {"id":1,  "img":"assets/level/1.jpg"},
  {"id":2,  "img":"assets/level/2.jpg"},
  {"id":3,  "img":"assets/level/3.jpg"},
  {"id":4,  "img":"assets/level/4.jpg"},
  {"id":5,  "img":"assets/level/5.jpg"},
  {"id":6,  "img":"assets/level/6.jpg"},
  {"id":7,  "img":"assets/level/7.jpg"},
  {"id":8,  "img":"assets/level/8.jpg"},
  {"id":9,  "img":"assets/level/9.jpg"},
  {"id":0,  "img":"assets/level/0.jpg"},];
  </code></pre>
  
  <p>The problem is if I go to the component html and type in the src <code>{{send.img}}</code>, it doesn't show any image.</p>
  
  <p>this is my html.component</p>
  
  <pre><code>&lt;div class="w3-col s12 m6 l6" id="level"&gt;
              &lt;div id="test"&gt;
                  &lt;img class="w3-round w3-mobile" width="500" height="300" src="{{level.img}}"&gt;
                  &lt;input class=" w3-margin-top w3-mobile w3-section" id="testQue" style="width:400px; height: 50px; align-content: center" type="text"&gt;
                  &lt;button id="check" class="w3-btn w3-round w3-brown w3-margin-left w3-mobile"&gt;SUBMIT&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Please, how do I resolve this issue?</p>