title: Refreshing or Updating row with corresponding button click in Angular4
body: <p>I have this code to render details from <em>json</em> to my component:</p>
  
  <pre><code>&lt;tr *ngFor="let wall of userWall"&gt;
      &lt;td *ngFor="let item of keys" [hidden]="!item.visible" [ngStyle]="{'text-align':'left'}"&gt;
          &lt;span *ngIf="item.fieldName=='walladdress' &amp;&amp; wall[ item.fieldName]!=''"&gt;{{ wall[item.fieldName] }}&lt;/span&gt;
          &lt;span *ngIf="item.fieldName=='walladdress' &amp;&amp; wall[ item.fieldName]==''"&gt;
              &lt;button type="submit" class="btn btn-primary" (click)="GenerateWall(wall.currid)"&gt;Generate&lt;/button&gt;
          &lt;/span&gt;
          &lt;span *ngIf="item.fieldName!='walladdress'"&gt;{{ wall[item.fieldName] }}&lt;/span&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Now by clicking the button, I am creating a wall and send it back to front end. But I am a bit confused exactly how to place new generated wall to the corresponding row cell. It seems I am unable to refresh data after creating a wall. Here is the functions that I call:</p>
  
  <pre><code>GenerateWallet(currid){
      this.UserApi.GenerateWall(currid).subscribe(data =&gt; {
          getUserWall();
      })
  }
  
  getUserWall(){
      this.UserApi.GetUserWall().subscribe(data =&gt; {
          if (Array.isArray(data)) {
              this.userWall = data;
          }
      })
  }
  
  filteredCurrencies
    init() {
      var wall = this.userWall
      this.filteredCurrencies = []
      for (var currencyIndex in this.currencies) {
        var flag = true
        var currency = this.currencies[currencyIndex]
        for (var index in wall) {
          var wall = wall[index]
          if (wall.currid == currency.currid) {
            flag = false
            break;
          }
        }
        if (flag) {
          this.filteredCurrencies.push(currency)
        }
      }
    }
  </code></pre>
  
  <p>And the json data which is bound is like this:</p>
  
  <pre><code>[
    {
      "currid": 1,
      "currencyname": "XXXX",
      "currencyshortname": "XXX",
      "cursymbolurl": "xxxx",
      "walletacid": 1719,
      "accountid": 1044,
      "fundslocked": 0.0,
      "walladdress": "ffaab3be-1958-11e8-886a-8512c9ba4a42",
      "bal": "",
      "usdvalue": "",
      "availabal": ""
    },
    ...
  ]
  </code></pre>
  
  <p>I have no background of Angular4, not even AngularJS. One of the UIs was left in the middle and I just have to finish it. Just understanding the pattern and reusing the code smartly which is already created.</p>