小编Man*_*gan的帖子

我正在构建一个车辆跟踪应用程序,我正在使用agm-map-marker来显示图像中这样的车辆,

和Livetracking.component.html代码是,

<agm-map #gm [latitude]="lat" [longitude]="lng" [(zoom)]="zoom" [mapTypeControl]="true">
            <agm-marker class="mapMarker" *ngFor="let device of devices;"
                [latitude]="device.latitude" [longitude]="device.longitude"
                (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow;mapMarkerInfo(m);">
            </agm-marker>
</agm-map>

在这里,我需要将标记替换为箭头,就像在此图像中一样,

我需要将标记更改为箭头,就像在第二张图像中一样.请帮助我达到预期的效果.

我需要一种方法来使用agm map自定义Angular 2中的地图标记.在车辆跟踪应用中,我必须通过实时跟踪组件中的agm-marker显示当前的车辆状态.我需要以三种不同的颜色显示标记(例如绿色表示停止运行红色,黄色表示空闲运行),我还需要显示目前车辆行驶的方向.

我搜索了很多地方,但发现只有可以添加到标记的图标,我添加了图标使用iconUrl像,

<agm-map>
    <agm-marker class="mapMarker" *ngFor="let device of devices;"  [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name">
    </agm-marker>
</agm-map>

我的输出就像,

由于这看起来更尴尬,请帮助我显示HTML,代替标记上的那个图标.

我需要输出,如下图所示(标记以及显示特定车辆编号的html标签).

我使用nav-pill其内部有一个表单,并且被分成各个部分说作为录取的详细信息,个人信息,对每一个步骤"下一步"按钮,家庭详细信息,最后保存按钮nav-pill.

$('.btnNext').click(function() {
  $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-pills > .active').prev('li').find('a').trigger('click');
});

//  Bind the event handler to the "submit" JavaScript event
$('#validateFirst').click(function() {

  // Get the Login Name value and trim it
  var name = $.trim($('#admission_no').val());

  // Check if empty or not
  if (name === '') {
    alert('Admission No. field is empty.');
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-pills nav_content">
  <li class="active"><a data-toggle="pill" href="#admission">Admission Details</a></li>
  <li><a …

我给了一个类型的输入字段datetime-local,

<input type="datetime-local" class="form-control" name="booking_checkin">

在填写和查看之后,格式是这样的,

2017-08-06T02:32 .

它看起来很尴尬,我需要改变这种模式,

我想要这样的格式,

2017-08-06, 02:32.

我很抱歉没有发布我尝试过的东西,因为我在这里搜索了很多东西之后甚至都没有启动想法.请帮助我解决它..

我在我的角度2车辆跟踪应用程序中使用agm map.这里我使用agm-map来显示地图.我有一个名为Playback Component的组件,表示用户可以查看从特定日期和时间到另一个的车辆特别的日期和时间.现在一切正常.我需要提供一个选项以及称为最大速度的日期和时间,这意味着用户可以在地图中查看车辆在用户输入的行程之上最大速度(例如,用户将最大速度设为50,单独的旅行点应以红色突出显示).

我试过以下,

    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeControl]="true">
        <agm-marker [latitude]="latlngMarker.latitude" [longitude]="latlngMarker.longitude">
        </agm-marker>
        <agm-polyline  [strokeColor]="'#2196f3'">
            <ng-container *ngFor="let i of latlng">
            <agm-polyline-point *ngIf = "i.speed < maxSpeed " [latitude]="i.latitude" [longitude]="i.longitude">
            </agm-polyline-point>
        </ng-container>
        </agm-polyline>
        <agm-polyline  [strokeColor]="'red'">
            <ng-container *ngFor="let i of latlng">
            <agm-polyline-point *ngIf = "i.speed > maxSpeed " [latitude]="i.latitude" [longitude]="i.longitude">
            </agm-polyline-point>
        </ng-container>
        </agm-polyline>
    </agm-map>

结果就像在图像中一样.

但我想要的就像这张图片,

此图像显示红色的旅行点以及蓝色点,车辆行驶的速度超过最大速度,我也需要输出,就像在第二个图像中一样.通过agm map poly point帮助我实现所需的结果.

我正在制作手风琴，以便在angular应用程序中使用JavaScript制作可折叠的div。

如果没有打开，请单击按钮Parent One或其他任何父名称。

HTML：

<div *ngFor="let item of data">
  <button class="accordion"> {{item.parentName}} </button>
  <div class="panel" *ngFor="let child of item.childProperties">
  <p> {{child.propertyName}} </p>
</div>
</div>

Ts：

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

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

  data: any =
    [
      {
        "parentName": "Parent One",
        "childProperties":
          [
            { "propertyName": "Property One" },
            { "propertyName": "Property Two" }
          ]
      },
      {
        "parentName": "Parent Two",
        "childProperties":
          [
            { "propertyName": "Property Three" …

我正在使用角度动态表单制作角度应用程序，其中我通过 JSON 加载动态表单的数据。

JSON 有两部分，例如第 1 部分和第 2 部分，

  jsonDataPart1: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    }
  ]

  jsonDataPart2: any = [
            {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_one",
          "label": "Property One",
          "type": "text", …

在我的Angular 6应用程序中，我正在选择文件上传选项，在预览中，需要使用自动裁剪和自动调整大小来显示上传的文件。

我尝试了以下方法

HTML：

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" [src]="url" width="300" height="227">
</div>
<input type='file' (change)="onSelectFile($event)">

文件选择功能：

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }

      const canvas : any =  document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const image = document.getElementById('source');

      ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
    }
  }

在上面，我已经尝试通过链接https://jsfiddle.net/8jwq3cs7/引用以下内容 …

我的HTML代码是

   <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i>Dashboard</a>
        <ul>
          <li class="active"><a href="{{route('ScamType.index')}}"><i class="icon icon-home"></i> <span>Scam Type</span></a> </li>
          <li> <a href="{{route('ScamDatabase.index')}}"><i class="icon icon-signal"></i> <span>Scam Database</span></a> </li>
          <li> <a href="{{route('ScamStory.index')}}"><i class="icon icon-inbox"></i> <span>Scam Story</span></a> </li>
          <li><a href="{{route('KeyWord.index')}}"><i class="icon icon-th"></i> <span>Keyword</span></a></li>
          <li><a href="{{route('Category.index')}}"><i class="icon icon-th"></i> <span>Category</span></a></li>
          <li><a href="{{route('SubCategory.index')}}"><i class="icon icon-th"></i> <span>Sub Category</span></a></li>
</ul>
</div>

在这里我给了li类活跃,就像在bootstrap中一样,它不起作用,但我不知道如何放弃laravel,我是laravel的初学者,所以请避免减去选票并给我正确的解决方案..如何我应该更改我的代码以使li类动态激活吗？

网址：

<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
  <option value="1">Double (Non a/c)</option>
  <option value="2">Premium Double (a/c)</option>
  <option value="3">Standard Double (a/c)</option>
</select>

点击事件：

<a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>

脚本：

export default {
  data(){
            return{
                facilitySelected:[]
            }
  }

  methods: {
      addFacilities() {
        this.facilitySelected;
        console.log(this.facilitySelected);
      }
  }
}

在这里，我有选择的选项列表，当我点击addFacilities时，value仅使作为输出在所选择的选项的console.log，我需要有两个value还有text在选项要通过的console.log出来..如何以同时获得value与text当我点击addFacilities？