如何使用http Angular访问对象内部的数组?

问题描述 投票:0回答:1

我具有db.json的以下结构

{
    "teams": [
        ...
    ],
    "matches": [
        { // matchday

            "id": "4b6023d0-8657-11ea-ab9d-57972c99f38c",
            "matches": [
                {
                    ...
                    "id": "4b604ae0-8657-11ea-ab9d-57972c99f38c"
                },
                ...
            ]
        },
        {...},
        {...},
    ]
}

如何更新ID匹配?

我已经尝试过]

const MATCHES_API = '/api/matches';

editMatch(match: Match, matchday: Matchday): Observable<Match> {
    return this.http
        .put(`${MATCHES_API}/${matchday.id}/matches/${match.id}`, match)
        .map((response: Response) => response.json());
}

同样,当我键入/api/matches/${matchday.id}/matches/${match.id}时,它也使我返回到/api/matches/

我如何在这里参加比赛?

Update:

组件的类,我尝试在其中实现]
import { Component, OnInit } from '@angular/core';
import { PremierLeagueService } from '../../premier-league.service';
import { Matchday } from '../../models/matchday.interface';
import { Match } from '../../models/match.interface';

@Component({
    selector: 'league-matches',
    styleUrls: ['league-matches.component.scss'],
    template: `
        <div
            class="matchday"
            *ngFor="let matchday of matches; let i = index">

            <h2>Matchday {{ i + 1 }}</h2>

            <match-item
                *ngFor="let match of matchday.matches; let i = index; let c = count"
                [match]="match"
                [matchday]="matchday"
                [teamIndex]="i"
                [teamAmount]="c"
                (submitScore)="submitScore($event)"
                (getMatchday)="getMatchday($event)">
            </match-item>
        </div>
    `
})

export class LeagueMatchesComponent implements OnInit{
    constructor(private premierLeagueService: PremierLeagueService) {}

    matches: Matchday[];
    currentMatchday: Matchday;

    ngOnInit() {
        this.premierLeagueService
            .getAllMatchdays()
            .subscribe((data: Matchday[]) => this.matches = data);
    }

    submitScore(match: Match) {
        this.premierLeagueService
            .editMatch(match)
            .subscribe((data: Match) => {
                this.matches.forEach((matchdayToCheck: Matchday) => {
                    matchdayToCheck.matches.forEach((matchToCheck: Match) => {
                        if (matchdayToCheck.id === match.id) {
                            matchToCheck = Object.assign({}, matchToCheck, match);
                        }
                    })
                })
            })
    }

     getMatchday(matchday: Matchday) {
         console.log(matchday);
         this.currentMatchday = matchday;
     }
}

[这就是我尝试编辑比赛(添加比赛分数)时得到的]

enter image description here

我尝试在第一个matches array中访问matchday

http://localhost:4000/api/matches/4b6023d0-8657-11ea-ab9d-57972c99f38c

http://localhost:4000/api/matches/${matchday.id}

通过ID访问的第一个比赛日

Accessed first matchday via ID如您所见,matchday具有IDmatches array

尝试访问匹配项

http://localhost:4000/api/matches/4b6023d0-8657-11ea-ab9d-57972c99f38c/4b604ae0-8657-11ea-ab9d-57972c99f38c

http://localhost:4000/api/matches/${matchday.id}/${match.id}

这会给我这个enter image description here

Update 2.0:

这是我的本地数据库通过webpack连接的方式

devServer: {
    contentBase: cwd,
    compress: true,
    inline: true,
    hot: true,
    port: 4000,
    publicPath: '/build/',
    quiet: true,
    historyApiFallback: true,
    setup: function (app) {
      app.use('/api', jsonServer.router('db.json'));
    },
    stats: {
      chunks: false,
      chunkModules: false
    }
  },

[我具有以下db.json { “:[...

angular angular-httpclient angular-http
1个回答
0
投票

如果使用的是简单的json服务器,则类似this

© www.soinside.com 2019 - 2024. All rights reserved.