如何在Angular 2中绑定另一个元素的宽度 - HTML?

时间:2018-04-16 20:59:49

标签: html angular size

我有一个输入和一个表。

<input type="search"/>
<table id="myTable"/>

如何将输入的宽度绑定到表格的相同宽度?

这样的东西?

<input type="search" [style.width]="#myTable.width"/>

1 个答案:

答案 0 :(得分:2)

输入标记中的引用应该是<table>的模板变量,而不是id。在表达式中使用#时不需要offsetWidth。您还需要检索width而不是<input [ngStyle]="{'width.px': myTable.offsetWidth }"> <table #myTable>...</table>

gulp.task('tns.Livesync', () => {
return gulp.watch([`../${SRC}**/*.common.ts`, `../${SRC}**/*.tns.ts`, `../${SRC}**/*.tns.html`,  `../${SRC}**/*.service.ts`,
 `../${SRC}**/*.tns.scss`, `../${SRC}**/*.scss`, `../${SRC}**/*.component.ts`, `../${SRC}**/*.routes.ts`,
 `../${SRC}**/*.index.ts`])
    .on('change', (file) => {
        var outputDest = file.substring(0, file.lastIndexOf('\\')+1).replace(SRC.substring(0, SRC.length - 1), DEST).replace('..\\', '');
        console.log('File-->' + file);
        console.log('Des-->' + outputDest);
        gulp.src([file])
            .pipe(rename(removeTns))
            .pipe(replace('.scss\'', '.css\'', { logs: { enabled: true }}))
            .pipe(debug({title: 'tns.Livesync'}))
            .pipe(debug({title: 'out ' + outputDest}))
            .pipe(gulp.dest(outputDest, {overwrite: true}));
    });

<强> DEMO