Question

我有以下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/。

我如何在这里参加比赛？

更新：组件的类，我尝试在其中实现

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;
     }
}

这就是我尝试编辑匹配（添加匹配分数）时得到的信息

我尝试访问前matches array个matchday

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

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

通过ID访问第一个比赛日

如您所见，matchday具有ID和matches 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}

这是给我的

更新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
    }
  },

Answer 1

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

它应该通过此url起作用

`${MATCHES_API}/{match.id}`

const MATCHES_API = '/api/matches';

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

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

1 个答案: