小编Mik*_*kel的帖子

Angular2*ngFor在选择列表中,根据来自对象的字符串设置活动

我正在尝试使用ngFor我的select DropDownList.已加载应该在下拉列表中的选项.

你在这里看到的代码:

<div class="column small-12 large-2">
    <label class="sbw_light">Title:</label><br />
    <select [(ngModel)]="passenger.Title">
       <option *ngFor="#title of titleArray" [value]="title.Value">{{title.Text}}</option>
    </select>
</div>
Run Code Online (Sandbox Code Playgroud)

根据此代码,它会生成一个看起来像这个图像的下拉列表.

在此输入图像描述

问题是,我想将其中一个"先生或太太"设置为活跃的,基于passenger.Title"先生"或"太太"的字符串.

任何人都可以帮忙看看我在这里做错了什么?

select typescript ngfor angular

32
推荐指数
2
解决办法
9万
查看次数

在angular2中构建一个包装器指令(包装一些内容/组件)

我是Angular2的新建筑指令.我想要的是创建一个弹出指令,将一些css类包装内容.

内容

内容可以是纯文本和标题,如:

<div class="data">
    <h2>Header</h2>
    Content to be placed here.
</div>
Run Code Online (Sandbox Code Playgroud)

然后我想给它一个指令属性,如:popup

<div class="data" popup>
    <h2>Header</h2>
    Content to be placed here.
</div>
Run Code Online (Sandbox Code Playgroud)

该指令应该做的是将div包装在里面,让我们说:

<div class="some class">
    <div class="some other class">
        <div class="data">
            <h2>Header</h2>
            Content to be placed here.
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我到目前为止描述的情况,这是一个属性或结构指令.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: `[popup]`
})

export class PopupDirective {


}
Run Code Online (Sandbox Code Playgroud)

html angular-template angular2-directives angular

13
推荐指数
2
解决办法
1万
查看次数

在菜单项之间留出更大的空间(导航)

我开始用 HTML5 和一些 CSS 样式创建我的第一个网页。我遇到了一个问题,我希望有人能帮我解决。

我正在尝试在菜单项之间留出空间,例如:

ABOUT        HELP       CONTACT
Run Code Online (Sandbox Code Playgroud)

我找到了一个简单的方法来做到这一点,但它做得不够好。作为一个例子,我有 2 个菜单是从这样的导航元素中创建的:

<nav class="nav2">      
    <li><a href="Højtalere.html">Stereo</a></li>
    <li><a href="Forstærkere.html">Højtalere</a></li>
    <li><a href="åbningstider.html">TV og hjemmebiograf</a></li>
    <li><a href="Computer.html">Streaming</a></li>
    <li><a href="Tilbehør.html">Tilbehør</a></li>
    <li><a href="Kabler.html">Kabler</a></li>       
</nav>  

<nav class="nav3">          
    <li><a href="login.html" style="display: inline;">Text</a></li>
    <li><a href="support.html" style="display: inline;">Text</a></li>
    <li><a href="???.html" style="display: inline;">Text</a></li>           
</nav>
Run Code Online (Sandbox Code Playgroud)

现在我已经用这个 css 代码创建了空间:

li {
   display: inline;
   margin-right: 20px;
   }
Run Code Online (Sandbox Code Playgroud)

问题是它为所有 li 元素提供了相同的空间,我如何编码它以便我可以控制让我们说 nav2 应该有 margin-right: 10px,但另一个应该有 40px 之间的空间?

希望你们明白我在做什么

html css

6
推荐指数
1
解决办法
3万
查看次数

样式复选框,将选中的背景色设置为窗口内的70%

我可以对复选框字段的样式使用一些帮助。现在,我自己做了一些自定义的CSS,并且效果很好。现在,我只需要在复选框窗口内打勾即可。

到目前为止的代码:

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 30px; /*Desired width*/
    height: 30px; /*Desired height*/
    cursor: pointer;
    border: 1px solid #CCC;
    border-radius: 2px;
    background-color: #fcfbfb;
    display: inline-block;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    color: black;
    box-sizing: content-box;
}

input[type="checkbox"]:checked {
    background-color: #002B45;
    border-radius: 2px;
    border: 1px solid #CCC;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    color: black;
    cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: 0 none;
    border-radius: 2px;
    box-shadow: none;
}
Run Code Online (Sandbox Code Playgroud)

HTML代码:

<div class="column small-12">
  <div class="checkbox"> …
Run Code Online (Sandbox Code Playgroud)

css checkbox

5
推荐指数
1
解决办法
3017
查看次数

依赖注入在 MVVM 中以对话框形式启动视图

我需要一些关于如何处理 ViewModel 中的依赖注入的建议。我的 viewModelMenuViewModel有一个ICommand方法,当用户单击视图中的按钮时将运行该方法。该方法将打开一个新窗口。该方法如下所示。

public void bookingCommand_DoWork(object obj)
{
    BookingView bookingView = new BookingView();
    BookingViewModel model = new BookingViewModel();
    bookingView.DataContext = model;

    bookingView.ShowDialog();
}
Run Code Online (Sandbox Code Playgroud)

BookingView它创建和的实例BookingViewModel。我正在尝试使用依赖项注入而不是创建这样的实例。

菜单视图模型

public class MenuViewModel : IViewMainWindowViewModel
{
    //commands
    public ICommand bookingCommand { get; set; }

    public MenuViewModel()
    {
        bookingCommand = new RelayCommand(bookingCommand_DoWork, () => true);
    }

    public void bookingCommand_DoWork(object obj)
    {
        BookingView bookingView = new BookingView();
        BookingViewModel model = new BookingViewModel();
        bookingView.DataContext = model;

        bookingView.ShowDialog();
    }
}
Run Code Online (Sandbox Code Playgroud)

这 …

c# wpf dependency-injection unity-container

5
推荐指数
1
解决办法
2568
查看次数

Angular 2管道,正确使用observable,我的管道不会返回海报路径

我正在试着打电话给我的服务,为我的所有电影获取海报网址(想要展示他们的海报).我正在使用Angular2并且现在已经创建了一个应该完成工作的管道.

我有这个代码:

<div class="row small-up-1 medium-up-2 large-up-4">
    <div class="column" *ngFor="let movie of MoviesOnNas">
        <span>{{movie.MovieYear}}</span>
        <img src="{{movie.MovieId | poster}}" class="thumbnail" alt="">
        {{movie.MovieTitle}}
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在这里你可以看到MoviesOnNas的电影,它将显示MoviesOnNas对象中的所有电影.

在线:

<img src="{{movie.MovieId | poster}}" class="thumbnail" alt="">
Run Code Online (Sandbox Code Playgroud)

我正在尝试使用我创建的自定义管道.看起来像这样.

@Pipe({ name: 'poster' })
export class PosterPipe implements PipeTransform {

constructor(public movieService: MovieService) {

}

transform(value: string, args: string[]): any {
    if (value) {
        // Go call api to get poster.
        this.movieService.getMoviePoster(value).subscribe((data) => {
            console.log("http://image.tmdb.org/t/p/w500" + data);
            var poster = "http://image.tmdb.org/t/p/w500" + data;
            return poster;
        }); …
Run Code Online (Sandbox Code Playgroud)

pipe subscribe observable angular

5
推荐指数
1
解决办法
8876
查看次数

将角度2应用程序中的对象发布到Web Api应用程序(获取不支持的媒体类型)

我可以使用一些指南,将我的angular 2应用程序中的对象发送到Web API.

我知道如何从Web Api到我的angular 2应用程序获取对象,但似乎无法弄清楚post方法是如何工作的,或者即使我应该使用http.post方法.

我的angular 2应用程序有以下方法:

sendUpdatdReservation(updatedReservation: Reservation) {

    var result;
    var objectToSend = JSON.stringify(updatedReservation);

    this.http.post('http://localhost:52262/api/postbookings', objectToSend)
    .map((res: Response) => res.json()).subscribe(res => result = res);

    console.log(result);

}
Run Code Online (Sandbox Code Playgroud)

"updatedReservation"是一个对象,我将其转换为JSON.

可以通过以下地址访问Web api:

HTTL://本地主机:52262/API/postbookings

Web Api控制器:

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class PostBookingsController : ApiController
{
    [AcceptVerbs()]
    public bool ConfirmBooking(Booking booking)
    {
        return true;
    }

}
Run Code Online (Sandbox Code Playgroud)

我要做的是发送对象,根据对象具有的更改值更新我的数据库.如果这是确认,则发送回真或假,以便我可以重定向到确认页面.

有没有人知道不支持的媒体类型错误?,那与我发送的对象不是api方法所期望的有关吗?

希望有人能提供帮助.

api http observable angular

4
推荐指数
1
解决办法
9782
查看次数

Angular2 JQuery,如何制作document.ready函数

我可以使用一些帮助,以便在没有任何按钮点击的情况下运行JQuery函数.现在它只有在我有一个按钮点击时才有效,所以JQuery会激活.

declare var jQuery: any;

@Component({
selector: 'home-component',
providers: [],
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
directives: [BannerComponent],
})

export class HomeComponent implements OnInit {

    constructor(public productService: ProductService, private elref: ElementRef) {

    }

    ngOnInit(): any {
        console.log("jQuery here");
        jQuery(this.elref.nativeElement).find('button').on('click', function ()          {
            jQuery('#owl-example').owlCarousel();
        });
    }

}
Run Code Online (Sandbox Code Playgroud)

此代码在组件内部.它找到了按钮,点击后,它将运行jQuery函数.

我想要的是这条线:

jQuery('#owl-example').owlCarousel();
Run Code Online (Sandbox Code Playgroud)

调用ngOnInit时触发(不点击任何按钮).为此,我需要实现JQuery:

$(document).ready(function() { }
Run Code Online (Sandbox Code Playgroud)

这里的问题是它不起作用:)到目前为止,我所尝试的是代码的和平:

ngOnInit(): any {
    console.log("jQuery here");
    jQuery(this.elref.nativeElement).ready(function() {
        jQuery('#owl-example').owlCarousel();
    });
}
Run Code Online (Sandbox Code Playgroud)

希望有人能提供帮助.

javascript jquery angular

3
推荐指数
1
解决办法
7918
查看次数

在ajax调用中设置延迟

我试图在加载程序图标和成功之间添加一个小延迟(2秒),数据为html.

我试图使用的是setTimeout并输入一个延迟号.这不起作用,所以我希望你能告诉我正确的方法是什么.

我的ajax代码:

<script type="text/javascript">

$(function () {

    var delay = 2000;

    var res = {
        loader: $("<div />", { class: "loader" })
    };

    $('#search').on('click', function () {
        $.ajax({
            type: 'GET',
            url: "@Url.Action("Find", "Hotel")",
            datatype: "html",
            beforeSend: function () {
                $("#group-panel-ajax").append(res.loader);
                setTimeout(delay);
            },

            success: function (data) {
                $("#group-panel-ajax").find(res.loader).remove();
                $('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
            }
        });
        return false;
    });
});

</script>
Run Code Online (Sandbox Code Playgroud)

现在它运行得非常快.希望有人能提供帮助.

javascript ajax jquery delay settimeout

2
推荐指数
1
解决办法
4万
查看次数

更改导航栏“引导程序”中的文本颜色

我是引导程序的新用户,想更改导航栏中项目的颜色。

已经创建了我自己的名为 Site.CSS 的 css 文件,但也有 bootstrap.css 文件。现在标题“首页、预订、联系、登录和注册”的文本颜色是灰色的。当你悬停在它上面时,它会变成白色。

我希望它是标准的白色,并在您用鼠标悬停在它上面时将其更改为灰色。

我拥有母版页的一些代码:

<form id="form" runat="server">
 <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/default.aspx">M-Hotels</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/default.aspx">Home</a></li>
                    <li><a runat="server" href="~/Booking.aspx">Booking</a></li>
                    <li><a runat="server" href="~/Contact.aspx">Contact</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Registration.aspx">Register</a></li>
                            <li><a runat="server" href="~/Login.aspx">Log in</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a runat="server" href="~/User.aspx" …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

1
推荐指数
1
解决办法
2万
查看次数

使用Mvvm时将datacontext viewmodel绑定到usercontrol视图

我需要一些帮助将viewModel绑定到我创建的两个usercontrol视图.

创建了一个应该包含这两个用户控件的预留窗口.

我得到了什么:

  • ReservationView(窗口)
  • ReservationListView(Usercontrol)
  • ReservationDetailView(Usercontrol)

ReservationView(Window)类

public partial class ReservationView : Window
{
    public ReservationView()
    {
        InitializeComponent();
        //DataContext = null;              
    }
}
Run Code Online (Sandbox Code Playgroud)

ReservationListView(Usercontrol)类:

public partial class ReservationListView : UserControl, IViewReservationListViewModel
{
    public ReservationListView(IViewReservationListViewModel viewModel)
    {
        InitializeComponent();
        DataContext = viewModel;
    }
}
Run Code Online (Sandbox Code Playgroud)

IViewReservationListViewModel只是一个空接口,它在usercontrol视图和viewModel之间建立联系.

ReservationListViewModel

public class ReservationListViewModel : INotifyPropertyChanged, IViewReservationListViewModel
{
    public ReservationListViewModel()
    {

    }
}
Run Code Online (Sandbox Code Playgroud)

当我尝试在ReservationView中的xaml中设置本地:"usercontrol"时,我收到以下错误:

The type "ReservationListView" does not include any accessible constructors.
Run Code Online (Sandbox Code Playgroud)

当我使用MVVM时,如何将这两个usercontrol链接到相应的viewModel?

wpf xaml user-controls mvvm

1
推荐指数
1
解决办法
5997
查看次数

使用Jquery ajax在Controller中调用ActionResult方法并返回数据

我试图了解Jquery Ajax方法的工作原理.现在,我在控制器中调用ActionResult方法时会遇到一些问题,该方法将返回PartialView.

创建了一个按钮,我将使用该按钮从服务器获取新数据(应运行Ajax调用)

代码:( Home控制器中的ActionResult)

public ActionResult All()
    {
        List<Student> model = db.Students.ToList();

        return PartialView("_Student", model);
    }
Run Code Online (Sandbox Code Playgroud)

当我在主索引视图中按下按钮时,我正试图调用此方法.

代码:(索引视图)

<div class="row">
<div class="small-12 column sbw-travel">
    <h2>Travel</h2>

    <div class="row">
        <div class="small-12 columns">
            <button id="button1" class="sbw-travel-button">Search</button>
        </div>
    </div>

    <div class="small-12 sbw-travel-box" id="rooms">

    </div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

当用户点击按钮时,应该运行Ajax调用,列表将显示在id = rooms的部分中.

脚本:( Ajax代码)

 $(document).ready(function () {
    $('#button1').click(function () {
        $.ajax({
            type: 'GET',
            url: @Url.Action("All", "Home"),
            datatype: "html",
            success: function () { 
                $('#rooms').html(???);
            }
        });
        return false;
    });
});
Run Code Online (Sandbox Code Playgroud)

你们中的任何人都可以看到我是否已经忘记了一些像我所描述的那样运行的东西?

javascript ajax asp.net-mvc jquery

0
推荐指数
1
解决办法
2万
查看次数