从VS2017中的Angular2中的JSON文件中获取数据

Question

可以通过使用服务从JSON文件中获取数据并在HTML组件中显示数据。面对的问题是我需要显示JSON的第一个数据，然后单击下一个按钮，需要显示下一个数据。喜欢测验应用程序。在我的代码下方services.ts代码

@Injectable()
export class QuestionServices {
    private _url = './app/question.json';
    constructor(private _http: Http) { }

    getQuestions(): Observable<any> {
        //debugger;
        return this._http.get('./app/question.json')
            .map((response: Response) => response.json());      
    }
}

Question.component.ts

@Component({
    selector: 'my-question',
    // templateUrl: 'template: "{controller=Home}/{action=Index}/{id?}");',
    styleUrls: ['app/user.component.css'],
    templateUrl: 'app/question.component.html',
    providers: [UserServices,QuestionServices]
})
export class UserList {
    data: Observable<Array<any>>;
    Questions: Observable<Array<any>>;
    Question: Observable<any>;
    options: Observable<Array<any>>;
    private _url = 'app/question.json';

    constructor(private services: QuestionServices) {
        //this.data = services.getQuestions();
       // console.log("Appcomponent.data:"+this.data);
    }

    ngOnInit() {
        //debugger;
        this.data = this.services.getQuestions();
        console.log("Enter into section 1", this.data);
    }

}

json文件：

[
  {
    "Qno": 1,
    "QuestionText": "Which of the following object is ideal for keeping data alive for a single request?",
    "QuestionType": "radio",
    "Options": [
      {
        "name": "HttpContext",
        "value": 1
      },
      {
        "name": "Session",
        "value": 2
      }
    ]
  },
  {
    "Qno": 2,
    "QuestionText": "Which of the following does NOT require type casting?",
    "QuestionType": "dropdown",
    "Options": [
      {
        "name": "Session",
        "value": 1
      },
      {
        "name": "ViewBag",
        "value": 2
      }
    ]
  },
  {
    "Qno": 3,
    "QuestionText": "Which are the cities you have gone?",
    "QuestionType": "checkbox",
    "Options": [
      {
        "name": "Chennai",
        "value": 1
      },
      {
        "name": "Bangalore",
        "value": 2
      },
      {
        "name": "Mysore",
        "value": 2
      },
      {
        "name": "Delhi",
        "value": 2
      }
    ]
  },
  {
    "Qno": 4,
    "QuestionText": "Enter name",
    "QuestionType": "textbox"
  }
]

html组件代码

<div *ngFor="let d of data | async;">
    <div *ngIf="d.QuestionType=='radio'">
        <div> Question: {{d.Qno}} </div>
        <div>{{d.QuestionText}}</div>
        <form *ngFor="let opt of d.Options">
            <input type="radio" value={{opt.Value}} name="radiogroup">{{opt.name}}
        </form>
    </div>
    <br />
    <div *ngIf="d.QuestionType=='dropdown'">
        <div> Question: {{d.Qno}} </div>
        <div>{{d.QuestionText}}</div>
        <form>
            <select>
                <option *ngFor="let opt of d.Options">
                    {{opt.name}}
                </option>
            </select>
        </form>
    </div>
    <br />
    <div *ngIf="d.QuestionType=='checkbox'">
        <div> Question: {{d.Qno}} </div>
        <div>{{d.QuestionText}}</div>
        <form *ngFor="let opt of d.Options">
            <input type="checkbox" name="city" value={{opt.name}}>{{opt.name}}
        </form>
    </div>
    <br />
    <div *ngIf="d.QuestionType=='textbox'">
        <div> Question: {{d.Qno}} </div>
        <div>{{d.QuestionText}}:<input type="text" /></div>
    </div>
</div>
<button>Load Next Question</button>

重点是单击下一个按钮时，我需要从JSON文件中显示下一个问题。现在它显示了所有问题。实现这一目标的任何想法。

Answer 1

您可以使用这样的简单设置，然后使用CSS

添加

组件

  counter = 0;
  next(){
    if(this.data.length-1 > this.counter) {
          this.counter ++ ;
          alert(this.counter);
    }
  }

模板

<div>
   {{data[counter]}}
  </div> 
  <button (click) = "next()"> Next </button>

Working Link

它不是完整的教授，因为您仍然必须检查计数器是否超过数组长度，但我认为您可以调整

Answer 2

我首先存储一个容纳位置，默认为0的变量，然后使下一个按钮增加此数字 - 类似于：

<button (click)="position++">next</button>

现在在您的问题模板中，踏入JSON时保存索引：

<div *ngFor="let d of data | async; let i = index">

最终添加测试以查看index是否与position匹配，并且仅显示该问题是否为true：

<div *ngIf="i == position">