草庐IT

html - 服务返回 JSON 后在 UI 中更新我的图形

coder 2023-08-12 原文

我有一个服务可以从我的 API 成功返回一个对象。然而，当它返回时，我已经用它们的默认值渲染了我的自定义图形组件。

例如，我可以从对象中提取 'title' 的值，请参阅 \\'works!' 评论

如何更新图表组件的“chart1Title”？

import { Component } from '@angular/core';
import { HttpWebServiceService1 } from './http-web-service-service';
import { Chart } from './bar-chart-demo/chartModel';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [HttpWebServiceService1]
})
export class AppComponent {
    charts: Chart[];
    thisChartObject: Array<Object>;
    thisChartsTitle: string;


  constructor(HttpWebServiceService1: HttpWebServiceService1){
    HttpWebServiceService1.getHTTP()
      .subscribe(
        charts => 
        {
          console.log(charts); //works
          console.log(charts['charts'][0]['title']); //works
this.chart1Title = charts['charts'][0]['title']; //does not work
        },
        error => console.error('Error: ' + error),
        () => console.log(charts[0])
      );

  }

  //Draw chart with some default values
  chart1Data:any[] = [
    {data: [3, 1, 1], type: 'bar'}
  ];
  chart1Label:string[] = [Label1', 'Label2', 'Label3'];
  chart1Type='bar';
  chart1Title = 'my graph title';
}

我的 HTML

<!-- Header -->
<div class="flex-container-header" 
    fxLayout="row" 
    fxLayoutAlign="space-between center">
  <div class="flex-item"> 
    <img src="../../assets/img/my_logo.png" >
  </div>
  <div class="flex-item" fxFlex=10>
    <img src="../../assets/img/my_logo1.png" ng-href="www.site.ie" >
  </div>
</div> 

<!--Headline Chart-->
<div *ngIf="!isLoading">
  <div class="flex-container" 
     fxLayout="row" 
     fxLayout.md="column"
     fxLayout.sm="column"
     fxLayout.xs="column"
     fxLayoutAlign="center">
  <div class="flex-item" fxFlex=60 fxFlex.md=100 fxFlex.sm=100 fxFlex.xs=100> <app-bar-chart-demo [chartLabel]="chart1Label" [chartData]="chart1Data" [chartType]="chart1Type" [(chartTitle)]="chart1Title"></app-bar-chart-demo>  </div>
</div>
</div>    
<p></p>
</div>

最佳答案

我在工作中遇到了同样的问题，对我来说，我使用了一个标志:isLoading

    export class AppComponent {
        charts: Chart[];
        thisChartObject: Array<Object>;
        thisChartsTitle: string;

        isLoading: boolean;


      constructor(HttpWebServiceService1: HttpWebServiceService1){
        this.isLoading = true;
        HttpWebServiceService1.getHTTP()
          .subscribe(
            charts => 
            {
              console.log(charts); //works
              console.log(charts['charts'][0]['title']); //works
              this.updateData(charts);
            },
            error => console.error('Error: ' + error)
          );

      }

      public updateData(charts: any) {
        this.chart1Title = charts['charts'][0]['title'];
        this.isLoading = false;
      }
    }

在你的*.component.html中:

    <div *ngIf="!isLoading">
      <your-chart></your-chart>
    </div>

希望对您有所帮助。

关于html - 服务返回 JSON 后在 UI 中更新我的图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42657067/

htmlJSONcharts3934resthttpangulartypescript

有关html - 服务返回 JSON 后在 UI 中更新我的图形的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  3. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  4. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  5. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  6. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  10. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

随机推荐