Как потреблять Restcall с угловой 6?

Question

Я совершенно новичок в Angular 6.

У меня есть RestCall, который мне нравится визуализировать в Angular 6.

http://localhost:52126/api/Sudoku/GetDefaultSolution

Почтальон вернет следующий (правильный) ответ:

"[{\" SudokuBoardId \ ": 0, \" clusters \ ": [{\" ClusterId \ ": 0, \" list \ ": [\" 0, 0 \ ", \" 1, 0 \ ", \" 0, 1 \ ", \" 1, 1 \ "]}, {\" ClusterId \ ": 0, \" list \ ": [\" 2, 0 \ ", \" 3, 0 \ ", \" 2, 1 \ ", \" 3, 1 \ "]}, {\" ClusterId \ ": 0, \" list \ ": [\" 0, 2 \ ", \" 1, 2 \ ", \" 0, 3 \ ", \" 1, 3 \ "]}, {\" ClusterId \ ": 0, \" list \ ": [\" 2, 2 \ ", \" 3, 2 \ ", \" 2, 3 \ ", \" 3, 3 \ "]}], \" boardValues ​​\ ": [[1,3,2,4], [4,2,3,1], [ 2,1,4,3], [3,4,1,2]], \ "xDimension \": 4, \ "yDimension \": 4}] "

Теперь мне нравится показывать это в угловом приложении. Html-сайт показывается корректно, а остальные - нет. Вот мой код:

sudokudata.component.ts:

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'sudokudata',
    templateUrl: './sudokudata.component.html'
})
export class SudokuDataComponent {
    public sudoku: Sudokus;

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get('http://localhost:52126/api/Sudoku/GetDefaultSolution').subscribe(result => {
            this.sudoku = result.json() as Sudokus;
        }, error => console.error(error));
    }
}

interface Sudokus {
    json:string;
}

sudokudata.component.html:

<h1>Sudoku showoff</h1>

<p>This component show one single Sudoku and its solution</p>

<p *ngIf="!sudoku"><em>Loading...</em></p>

<p>{{sudoku.json}}</p>

<table class='table' *ngIf="sudokus">
<thead>
    <tr>
        <th>JSON</th>
    </tr>
</thead>
<tbody>
        <tr>
            <td>{{ sudoku.json }}</td>
        </tr>
    </tbody>
</table>

Все, что показано:

Судоку выпендреж

Этот компонент показывает одно судоку и его решение

Loading ...

То есть «судоку» не заполнено вообще? Как мне изменить эту переменную с помощью Json.output?

Answer 1

В Angular 6 вам не нужно вызывать .json(), потому что по умолчанию ответ будет проанализирован как JSON и преобразован в объект Javascript для вас Angular.

Так что просто замените result.json() просто result

Также вам не нужно as Sudokus вы можете сообщить Angular, какой должен быть тип возвращаемого ответа, следующим образом:

Сначала обновите интерфейс, чтобы он соответствовал всем, что возвращается из API, например,

interface Sudokus { 
 [prop: string]: any;
}

Затем используйте тип Sudokus при вызове API следующим образом:

http.get<Sudokus[]>('http://localhost:52126/api/Sudoku/GetDefaultSolution').subscribe(result => {
            this.sudoku = result;
        }, error => console.error(error));

Обратите внимание на скобки <> в методе get.

Answer 2

Я не уверен в этом

this.sudoku = result.json() as Sudokus;

, но я использую ответ, подобный этому, и он работает

http.get('http://localhost:52126/api/Sudoku/GetDefaultSolution')
    .subscribe((result: Sudokus) => {
        this.sudoku = result;
    }, error => console.error(error));