小编Man*_*gan的帖子

在一个按钮点击我有功能，

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

在导航组件中，我获取的数据如下，

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

在哪里，

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

并且，

console.log(data.mockup_id) gives result undefined

在这里我需要检索对象值，但无法获取它。请帮助我通过查询参数检索数据并使用打字稿ngOnit而不使用 html获取数据。

我正在使用ng2圆环图来显示一些项目,根据圆环图文档,它的工作正常,但我需要更改的是,每个切片的标签显示仅在悬停但我需要的是它应该是默认情况下,每个切片.

Dashboard.component.html:

<canvas #mycanvas baseChart
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [colors]="colors"
    [options]="options"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)">
</canvas>

Dashboard.component.ts:

public doughnutChartLabels:string[] = ['Running', 'Stop', 'Idle'];
public doughnutChartData:number[] = [1, 4, 5];
public doughnutChartType:string = 'doughnut';
public colors: any[] = [{ backgroundColor: ["#008000", "#FF0000", "#FFA500"] }];

我需要的东西与图像完全一样,

标签应该在每个切片中都是默认的,只需要使用纯打字稿而不是javascript即可实现.请帮助我达到预期的效果.

我正在使用 angular 6，但无法在选择框中将所选选项显示为默认值，

HTML包括，

<select class="form-control selectBox" name="username" #username="ngModel" required ngModel>
<option disabled selected>Select User Name</option>
<option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
</select>

:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  userList: any = [
    {
      "name" : "Test User"
    },
    {
      "name" : "Hello World"
    },
    {
      "name" : "User Three"
    }
  ]
}

它在选择框中默认显示空值。

如何在行中的选择框中将所选选项显示为默认值？

<option disabled selected>Select User Name</option> …

我正在制作角度应用程序，并且我有一个空数组，例如，

  users: any = [];

然后我进行服务调用以ngOnInit将数据存储到users数组中，例如，

  ngOnInit() {

    //Getting the data from json
    this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {
      console.log("response", response.data);
      response.data.forEach(element => {
        //Pusing the data to users array
        this.users.push(element);
      });
    })

    //Trying to get the complete array after push of the element from the service response data
    console.log("users array", this.users);
    //But it shows empty array
  }

但我无法获取数据，console.log("users array", this.users);因为服务呼叫造成了延迟。

如何将数据推送到this.users服务中，当我们在服务外部调用时，它应该具有填充的数据，而不是像现在这样为空。

还做了一个关于它的工作 stackblitz https://stackblitz.com/edit/angular-q3yphw

请查看具有当前结果的控制台。

当前结果是console.log("users array", this.users);空数组[] …

我正在使用jquery和jquery ui进行我添加的角度项目中的拖放功能，

Index.html：

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Component.ts：

declare var jquery:any;
declare var $ :any;

export class DropAreaComponent implements OnInit, OnDestroy {
      ngOnInit(): void {
        $("#people").sortable({
          update: function(e, ui) {
            $("#people .draggable").each(function(i, element) {
              $(element).attr("id", $(element).index("#people .draggable"));
              $(element).text($(element).text().split("Index")[0] + " " + "Index: " + " => " + $(element).attr("id"));
            });
          }
        });
}

Component.html：

<ul id="people">
    <li *ngFor="let person of people; let i = index">
      <div class="draggable" id={{i}}>
        <p> <b> {{ person.name }} </b> Index …

我正在使用 vee-validate 来验证注册表，并且我已经编写了如下代码，

        <form @submit.prevent="signUp()">
          <div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" >
            <input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" required class="form-control" type="number" placeholder="Mobile Number">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.email') }" >
            <input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.password') }" >
            <input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" >
            <input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password">
          </div>
          <div class="modal-footer btn-center">
            <button type="submit" class="btn btn-default">Sign Up</button>
          </div>
        </form>

脚本是：

export default …

我有一行有两列，如下面的代码片段所示。在第 1 列中，标签下有7 个列表项ul。

但我需要在第 1 列中仅显示 5 个列表项，其余项目应移至下一列..（即移至第 2 列）。

如果列表项超过计数 (5)，我怎样才能实现根据计数（此处为 5）自动将列表项移动到下一列的结果。

结果预计仅在 html 和 css 中，并且不应该有任何像 jquery 或任何其他第三方的库。

当前片段：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 <div class="col-xs-4 mr-4">
 <ul class="list-group">
  <li class="list-group-item">List Item 1</li>
  <li class="list-group-item">List Item 2</li>
  <li class="list-group-item">List Item 3</li>
  <li class="list-group-item">List Item 4</li>
  <li class="list-group-item">List Item 5</li>
  <li class="list-group-item">List Item 6</li>
  <li class="list-group-item">List Item 7</li>
</ul>
 </div>
  <div class="col-xs-4 mr-4">
 Column-2
 </div>
 </div> …

在我的角度应用程序中，我正在制作一个复选框并捕获复选框更改事件并将选中的值推入数组中。

在这里，如果我们取消选中该复选框，则 obj 也会被推送到数组中。

如果取消选中如何从数组中删除obj。

<div *ngFor="let item of order; let i = index">
  <input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckboxValues(item)">
   <label [for]="item+i"> {{item}} </label>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  order = ['One','Two','Three','Four'];

  newArray : any = [];

  //Checkbox Change detecting function
  getCheckboxValues(data) {
    let obj = {
      "order" : data
    }

   // Pushing the object …