Question

你好，我在python的Flask中创建了一个迷你终结点，并且运行良好。当我从邮递员访问它时：

http://127.0.0.1:5000/retrieve_data

它将数据作为json检索。但是当我从角度调用端点时：

export class HomeComponent implements OnInit {
  title = 'angular-demo';
  data = this.getAnnounce();

  getAnnounce() {
    return this.http.get('http://127.0.0.1:5000/retrieve_data');
  }

  constructor(private http: HttpClient) {

  }

实际结果是：

    {
        "_isScalar": false,
        "source": {
            "_isScalar": false,
            "source": {
                "_isScalar": false,
                "source": {
                    "_isScalar": true,
                    "value": {
                        "url": "http://127.0.0.1:5000/retrieve_data",
                        "body": null,
                        "reportProgress": false,
                        "withCredentials": false,
                        "responseType": "json",
                        "method": "GET",
                        "headers": {
                            "normalizedNames": {},
                            "lazyUp
Canceldate": null,
                            "headers": {}
                        },
                        "params": {
                            "updates": null,
                            "cloneFrom": null,
                            "encoder": {},
                            "map": null
                        },
                        "urlWithParams": "http://127.0.0.1:5000/retrieve_data"
                    }
                },
                "operator": {
                    "concurrent": 1
                }
            },
            "operator": {}
        },
        "operator": {}
    }

PS：我对丑角非常陌生

Answer 1

在document of angular's http client中，返回值的类型http.get()为Observable

因此，如果要获取服务器响应的数据，则必须按以下方式订阅：

data = {};

getAnnounce() {
    this.http.get('http://127.0.0.1:5000/retrieve_data')
        .subscribe(result => this.data = result);
}

Answer 2

您必须订阅<form [formGroup]="form"> <div *ngFor="let controls of form.controls;let i=index;let last=last" [formGroupName]="i"> <input formControlName="field1"> <input formControlName="field2"> <button type="button" *ngIf="last" [disabled]="!form.controls[i].valid" (click)="addLine()"> Add </button> </div> </form> {{form?.value|json}}函数。

例如，您可以尝试：

  export class AppComponent implements OnInit  {
      form:FormArray;  //see that our Form is directly a FormArray

      constructor(private fb:FormBuilder){}
      ngOnInit()
      {
        this.form=this.createForm(null); //At first we create an empty form
      }

      createForm(data:any[]):FormArray
      {
         //controls is an array of FormGroup
         let controls:FormGroup[]=
            data?data.map(x=>this.createLineArray(x))
                :[this.createLineArray(null)];
         return this.fb.array(controls);
      }

      createLineArray(data:any):FormGroup
      {
          return this.fb.group({
            field1:[data && data.field2?data.field2:null,Validators.required],
            field2:[data && data.field1?data.field1:null,Validators.required]
          })
      }

      //addLine simply push a new line in the array
      addLine()
      {
        this.form.push(this.createLineArray(null));
      }

或者直接在您的getAnnounce / data = this.getAnnounce().subscribe();上：

constructor

Answer 3

很好的问题，正如其他一些人所建议的那样，似乎您在.subscribe()方法上缺少了getAnnounce()。 Angular Docs has a guide on observables可以帮助您更好地理解。

我还有其他一些建议，可以改善您的角度体验。利用services将相似的功能分组在一起。例如，在提供的代码中，您可以将getAnnounce()移至您创建的新服务；类似于AnnouncementService。然后，您可以在代码的许多地方使用它。它也有助于测试它并在以后发现错误，因为您的代码更加分离。

您可以做的另一件事是将服务器api地址移动到环境变量。默认情况下，如果您使用Angular CLI构建了角度项目，则会在我们的src文件夹中找到一个environments文件夹，其中默认包含两个文件environment.ts和environment.prod.ts。您可以在.ts文件中的任何位置访问此JSON对象，并且在为产品或本地构建产品代码时，它可以将值更改为您设置的值。在您的情况下，您可以将本地API地址放在http://127.0.0.1:5000中。

export const environment = {
  production: false,
  api: 'http://127.0.0.1:5000'
};

现在，如果您更改端口号或将api置于真实服务器中，则可以轻松访问此站点，并只需更改一个位置即可。

从'./environments/environment'导入{环境};

/ *记住要导入环境文件的非生产版本，angular知道如何在为生产而构建或不为生产而自动切换它们。 * /

希望这对您的编码有所帮助，祝您好运！

来自angular的Localhost请求

3 个答案: