小编low*_*ler的帖子

我正在尝试为角度项目构建"实用程序"服务(类).实用程序类具有静态函数(因此我们不必实例化不必要的对象).一个例子是:

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

@Injectable()
export class DateService {
   constructor() {
   }

   public static parseDate(dateString: string): Date {
       if (dateString) {
           return new Date(dateString);
       } else {
           return null;
       }
   }
}

在我的组件类文件中,然后我像这样导入它:

import { DateService } from '../utilities/date.service';

在这样的类代码中工作:

ngOnInit():void {
  let temp = DateService.parseDate("2012/07/30");
  console.log(temp);  // Mon Jul 30 2012 00:00:00 GMT-0500 (Central Daylight Time)
 }

但是,我希望能够在角度html模板中使用这些实用程序函数,如下所示:

<label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=DateService.parseDate($event.target.value)" name="date">

不幸的是,这不起作用; 给出一个"无法读取属性'的parseDate'未定义"错误.

现在,我可以将'parseDate'函数移动到组件类,并且工作正常(当然,模板中需要更改)...但是,如果我有一堆组件,他们都需要有自己的'parseDate'功能,我想我们都知道这是一个不好扩展的坏主意.(请忽略parseDate函数的微不足道的性质)

此外,即使我不想实例化一个对象只是为了运行静态函数,我尝试使用实际的依赖注入.将它添加到providers数组,并在构造函数中构建一个实例 - …

我有这段代码...我想要一个宽度至少为 250 像素的“列”...我尝试了 Material ui 建议的尺寸调整： https: //material-ui.com/system /sizing/似乎没有任何运气...当窗口大小缩小时，'logo' 元素将缩小到小于 250px。当发生这种情况时，红色网格项（它本身是包含我的实际数据的网格容器）会遮盖徽标。

如何设置 Material ui Grid 项目的最小宽度？

<Grid
    container
    direction="row"
>
    <Grid item xs={3}  >
        <Box width={250}>
            <img src={Logo} key="logo" width="250"  height="100" alt="Logo" />
        </Box>
    </Grid>
    <Grid item style={{ backgroundColor: '#f22' }} xs={9}>
        <Grid
            container
            direction="row"
            justify="flex-start"
            spacing={2}
        >
        {this.panelGrid(eventID, panelData)}
        </Grid>
    </Grid>
</Grid>

使用带有打字稿插件的Atom编辑器我收到以下错误:

错误文件"D:/foo/app/classes/event.class.ts"未包含在TypeScript编译上下文中.如果不是这样,请检查tsconfig.json file.at第1行col 1的"files"或"filesGlob"部分.

我的tsconfig.json文件的内容是:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
    ]
}

我看过其他一些有这个问题的人.这个:https://github.com/lathonez/clicker/issues/4让我尝试在tsconfig.json数组中构建一个"files"数组.这与其他线程中的人非常相似,没有帮助.请注意,该线程谈了很多关于测试...这不适用于我.

我也尝试通过这个线程解析:https://github.com/TypeStrong/atom-typescript/issues/558然而,这基本上最终成为关于纯度与实用主义的争论.我确实认为如果缺少files和filesGlob数组,则会使用隐式的"everything"glob.如果是这种情况,为什么我得到错误,因为我没有文件和filesGlob条目.

顺便说一句,命令行TSC正在生成已编译的js和映射文件....但我仍然需要看到Atom中的大红色错误.

对于它的价值,event.class.ts文件看起来像这样(我不认为这是问题的根源,但我想包括它是为了完整性):

import {Utilities} from '../utilities';

export class Event {
    eventData:JSON;
    eventID:string;

    constructor(_eventData:JSON, _eventID?:string) {
        if(_eventID==null) {
            _eventID=Utilities.newGuidPlus();
        }
        this.eventID = _eventID;
        this.eventData = _eventData;
    }


    getEventData():JSON { // returns the full event
        return this.eventData;
    }

    getEventID():string { …

我有一个Material UI Card 组件，我希望它包含一个自动播放的视频 (webm)。（这是一个静音视频）

CardMedia 组件的文档指示将任何 HTML 元素列为组件元素类型 - 因此我列出了“视频”。

我尝试过使用这里的建议：视频自动播放不起作用 - 尝试找到修复方法

具体来说，我尝试添加component: 'video autoPlay muted但无济于事 - 收到无法创建元素的错误。我还尝试传递实际标签：<video autoPlay muted>...也失败（“期望字符串”）。

<Card className={classes.root} raised={true}>
        <CardHeader
            title={camera.cameraName}
        />

        <CardActionArea>
            <CardMedia
                component='video'
                className={classes.media}
                image={"path/to/file/video.webm"}
            />
            <CardContent>

                <Typography variant="body2" color="textSecondary" component="p">
                    Some Text
                </Typography>
            </CardContent>
        </CardActionArea>
    </Card>

关于如何在 MaterialUI CardMedia 组件中自动播放视频有什么建议吗？

或者，我会满足于默认显示控件 - 按原样，您必须右键单击并选择“显示控件”。

我想导航使用动态生成的选择下拉列表.看起来我不能直接这样做,所以我只想在select更改时进行函数调用.

要做到这一点,我有这个:

---在模板中---

<select (change)="navSelected($event)">
    <option *ngFor="let button of navButtons;"
    value="button.route" >{{button.label}}</option>
</select>

足以说'navButtons'是一个具有'label'字段的对象数组.

- -在课堂里 - -

navSelected(navName) {
    console.log(navName + " Clicked!");
}

这实际上很好.

我从Mark Rajcok的大力帮助中得到了这一点以及他在这个老问题中的回答: 如何在Angular 2中的"select"中获得新的选择？

也就是说,我希望能够在navSelected()函数调用中传递选定的值.我不确定该怎么做.

我尝试将[ngValue]="button"其他搜索中的猜测添加到选项标记然后button在(change)事件处理程序中引用该变量(所以:(change)="navSelected(button.label)"和其他组合,无济于事.我看过很多对ngModel的引用,但它们看起来很旧,我不完全确定他们已经申请了(我无法让他们在RC4中工作).

我可能会拉一些jquery或其他任何东西来找到选择并获得它的值,但这似乎非常无聊 - 与仅仅能够正确调用函数相比.

我有一个select：

<FormControl className={classes.formControl}>
    <InputLabel htmlFor="age-native-simple">{this.props.label}</InputLabel> 
    <Select
            native
            value={this.state.value}
            onChange={this.handleSelectChange('value')}
        inputProps={{
            name: this.props.label,
            id: this.props.id,
        }}
        >
        {this.buildSelectOptions(this.props.options)}
    </Select>
                        {(this.props.helperText)?<FormHelperText>{this.props.helperText}</FormHelperText>:null}
</FormControl>

formControl 类如下所示：

formControl: {
    margin: 0,
    fullWidth: true,
    backgroundColor: '#9ee',
    wrap: 'nowrap'
},

它工作得相当好 - 将自身调整为尽可能小，同时仍然显示最大的可能option值。

不幸的是，当InputLabel比 select 的内容长时options……标签会包裹起来，看起来很糟糕。

如何让我的选择不包裹输入标签？我希望它可以根据需要简单地扩展选择，就像在option列表中有很长的条目时一样。出于多种原因，设置“minWidth”不是我的首选解决方案（主要是该组件被许多不同的东西使用，并且计算它们的 minWidth 会很困难）

我可能会偏离这个过程，但这里是：

我有 Angular2 服务。该服务的数据源将是 localstorage...稍后当使用 http 返回的数据库调用时可以选择更新。因为我想要更新随着各种来源返回而返回的数据，所以看来我想使用可观察量。现在，我只是想弄清楚这个概念，所以我跳过了本地存储方面......但我包括了“背景故事”，所以它（在某种程度上）解释了我为什么想要这样做这有多种方法。

我的想法是我会有一个“getHTTPEvents()”方法，该方法将返回一个可观察对象，其有效负载是来自数据库的事件。（理论是，在未来的某个时候，我还会有一个“getLSEvents()”方法，该方法会搭载在那里）

为了模拟这一点，我有这样的代码：

private eventsUrl = 'app/mock-events.json';
getHTTPEvents() : Observable<Array<any>> { 
    return this._http.get(this.eventsUrl)
        .map(response => response.json()['events'])
        .catch(this.handleError); // handle error is a logging method
}

我的目标是创建一种方法，允许过滤返回的事件，但仍然向服务的用户返回可观察的结果。这就是我的问题所在。为了实现这个目标，我有一个公共方法，该方法将由服务的用户调用。（尝试使用这里的模式https://coryrylan.com/blog/angular-2-observable-data-services）

public getEvents(key:string,value:string) : Observable<Array<any>> {
    var allEventsObserve : Observable<Array<any>> = this.getHTTPEvents();
    var filteredEventsObserve : Observable<Array<any>>;


    allEventsObserve 
    .subscribe(
        events => {
            for(var i=0;i<events.length;i++) {
                if(events[i][key]==value) {
                    console.log('MATCH!!!' + events[i][key]); // THIS WORKS!
                    return new Observable(observer => filteredEventsObserve = observer);  // what do I need to return here? …

我在 Material UI 的“选择”上玩得很开心 - 大约 10 个小时试图让一个人以我想要的方式工作。我真的很感激一些帮助。

这个问题与前一个问题有关：Select MenuItem 不显示 JSX 保存到状态的时间，我怀疑如果“为什么”得到了回答，我可能会更好地了解发生了什么。

我想要完成的是让 Select 执行以下正常操作：

• 拥有所有 UI 好东西（在选择位置显示问题，然后在选择非空选择后将问题移小并移开）
• 选择某些内容后，标签会显示（正如人们在下拉列表中所期望的那样）而不是空白（正如我所经历的 - 检查上一个问题）
• 控制台中没有关于“值”未定义的警告
• 当我在选择某些内容后单击远离选择时，我不希望问题标签像这样移回到答案的顶部：
• 我想要一个“无”选项，将选择返回到它的“空”形式（也就是说，问题标签在选择中以正常大小显示）
• 我可以设置一个选择以默认选择

这些不应该是艰巨的任务，但我一辈子都做不到。比较尴尬

• 然后，在选择某些内容时，我想将该选择（以及其他选择选项）保存到状态（以便我可以将其保存到 localStorage 以便较大的表单不会在页面刷新时“重置”）

无论哪种方式，我目前都有这个 JSX - 有效地从材料 ui 演示中剪切和粘贴，并带有以下地图MenuItems：

<FormControl className={classes.formControl}>
<InputLabel htmlFor={this.props.label}>{this.props.label}</InputLabel>
<Select
    value={this.state.selectLabel}
    onChange={this.handleSelectChange}
    inputProps={{
        name: 'selectLabel',  
        id: this.props.label,
    }}
>
{this.props.value.map(valueLabelPair =>
                <MenuItem
                    key={this.props.XMLvalue + "_" + valueLabelPair.label}
                    value={valueLabelPair.value}
                >
                    {valueLabelPair.label}
                </MenuItem>
            )}
</Select>
</FormControl>

handleSelectChange 看起来像这样——同样，与材质 UI 演示完全相同。

handleSelectChange = event => {
    this.setState({ [event.target.name]: …

我有一个MaterialUI 对话框，上面有一些文本字段、下拉菜单和其他内容。每次对话框打开或重新打开时，其中一些元素需要设置为某个值。在满足某些条件（例如，加载用户数据）之前，无法加载其他元素。

对于“重置”，我使用 onEnter 函数。但是 onEnter 函数在输入之前不会运行（废话！）...但是渲染函数本身仍然会运行 - 这意味着 JSX 中的任何逻辑或访问 javascript 变量仍然会发生。这使得“onEnter”函数无法成为我设置和初始化对话框的地方。

我也无法使用构造函数来设置/重置此初始状态，因为构造状态所需的数据在构造函数加载时（应用程序启动时）可能不可用。现在，我可以在渲染函数中使 JSX 变得超级复杂，并为每个数据点设置条件……但这对于每次应用程序更改任何内容时都会重新渲染的内容来说是很大的开销。（即使“open”参数设置为 false，材质 UI 对话框也会运行整个渲染函数）。

处理材质 ui 对话框的初始化值的最佳方法是什么？

这是一个超级简单的示例（在现实生活中，想象 getInitialState 是一个更复杂、更慢、并且可能是异步/网络的函数） - 让我们假设用户对象在应用程序启动时不可用，实际上是一些数据应用程序启动后很长时间才拉出或输入。此代码失败，因为“user”在第一次渲染时未定义（在 onEnter 运行之前发生）。

constructor(props) {
    super(props);
}

getInitialState = () => {
    return {
        user: {username: "John Doe"}
    }
}

onEnter = () => {
    this.setState(this.getInitialState())
}


render() {
    const { dialogVisibility } = this.props;

    return (
        <Dialog  open={dialogVisibility}  onEnter={this.onEnter}>
            <DialogTitle>
                Hi, {this.state.user.username}
            </DialogTitle>
        </Dialog> );
}

我的第一直觉是在状态中放入一个“isInitialized”变量，并且只有在“isInitialized”为 true 时才让渲染返回对话框，如下所示：

constructor(props) { …

我在 gitlab 中有一个合并请求：

我已经批准了这个请求——看起来不错。我想和主人融合。

当我转到“解决冲突”时，我得到以下信息：

请注意，特别是在默认提交消息中，它似乎试图将“master”合并到“156”中。这与我想要的相反——我想将这些东西合并到 master 中。

即使我向前推进并通过选择一个进行合并（并且我不确定哪个是正确的，因为不清楚什么是“我的”与“我们的”......我返回到 gitlab 合并请求页面并且告诉仍然存在冲突 - 但现在按钮可以在 gitlab 中执行此操作，仅在本地：

我做错了什么？是否没有通过 gitlab 合并的方法 - 我必须在本地进行合并然后推送它吗？