Javascript 其中一个组件输入参数不会以角度更新

我有一个父组件，它在对象数组上循环并渲染子组件

子组件有两个输入参数：

text

和

terms

。因此，父组件的HTML如下所示：

<div *ngFor="let item of items">
    <childComponent [text]='item.text' [terms]='item.terms' />
</div>

更新2：

这是我的父组件的代码：

var ContextPartialTranslation = (function () {
    function ContextPartialTranslation() {
        var _this = this;
        _this.loadEntity();
        _this.handleWordIsSetAsKnown();
    }
    ContextPartialTranslation.prototype.handleWordIsSetAsKnown = function () {
        var _this = this;
        waitAndRun('app.wordIsSetAsKnown', function () {
            app.wordIsSetAsKnown.subscribe(function (term) {
                console.log(term);
                _this.removeWordFromNewWordsList(_this.originalData, term);
                _this.setData(_this.originalData);
            });
        });
    };
    ContextPartialTranslation.prototype.removeWordFromNewWordsList = function (object, term) {
        var _this = this;
        if (!object) {
            return;
        }
        if (typeof object !== "object") {
            return;
        }
        for (property in object) {
            if (property === "newWords") {
                object[property] = object[property].filter(function (item) { return item['term'].toLowerCase() !== term.toLowerCase() });
            }
            else {
                _this.removeWordFromNewWordsList(object[property], term);
            }
        }
    };
    ContextPartialTranslation.prototype.loadEntity = function (entityGuid, previousEntityGuid) {
        var _this = this;
        // loading data from API, then calling setData using JSON returned from API
    };
    ContextPartialTranslation.prototype.setData = function (data) {
        var _this = this;
        _this.readingStats = null;
        _this.content = null;
        _this.entity = null;
        _this.readingStats = data.readingStats;
        _this.content = data;
        _this.entity = data.entity;
        console.log('new enttiy', _this.entity);
    };
    ContextPartialTranslation = __decorate([
        ng.core.Component({
            selector: 'contextPartialTranslation',
            templateUrl: '/context/partialTranslationHtml',
            preserveWhitespaces: true 
        }),
        __metadata("design:paramtypes", [])
    ], ContextPartialTranslation);
    ContextPartialTranslation.parameters = [];
    return ContextPartialTranslation;
}());

var OriginalText = (function () {
    function OriginalText() {
        var _this = this;
    }
    OriginalText.prototype.ngOnChanges = function (changes) {
        var _this = this;
        console.log(changes);
        _this.html = app.sanitizer.bypassSecurityTrustHtml(_this.addStyleToNewWordsInsideText(_this.html, _this.newWords));
    };
    OriginalText.prototype.addStyleToNewWordsInsideText = function (text, newWords) {
        if (!text) {
            text = '';
        }
        if (!newWords) {
            newWords = [];
        }
        tempNewWords = newWords.map(function (i) { return i.term; });
        var allWords = [];
        var regex = /\b[a-zA-Z]{2,}\b/gi;
        var match = true;
        while (match) {
            match = regex.exec(text);
            if (match && tempNewWords.indexOf(match.toString()) === -1) {
                allWords.push(match.toString());
            }
        }
        tempNewWords = tempNewWords.filter(function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
        });
        allWords = allWords.filter(function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
        });
        for (var x = 0; x < allWords.length; x++) {
            text = text.replace(new RegExp('\\b' + allWords[x] + '\\b', 'gi'), function (newWord) {
                return '<span class="word" onclick="app.showWordDialog(\'' + newWord + '\')">' + newWord + '</span>';
            });
        }
        for (var y = 0; y < tempNewWords.length; y++) {
            text = text.replace(new RegExp('\\b' + tempNewWords[y] + '\\b', 'gi'), function (newWord) {
                return '<span class="newWord">' + newWord + '</span>';
            });
        }
        return text;
    };
    __decorate([
            ng.core.Input(),
            __metadata("design:type", String)
        ], OriginalText.prototype, 'html', void 0);
    __decorate([
            ng.core.Input(),
            __metadata("design:type", String)
        ], OriginalText.prototype, 'newWords', void 0);
    OriginalText = __decorate([
        ng.core.Component({
            selector: 'originalText',
            templateUrl: '/language/originalText',
            preserveWhitespaces: true 
        }),
        __metadata("design:paramtypes", [])
    ], OriginalText);
    OriginalText.parameters = [];
    return OriginalText;
}());

这是我的子组件的代码：

var ContextPartialTranslation = (function () {
    function ContextPartialTranslation() {
        var _this = this;
        _this.loadEntity();
        _this.handleWordIsSetAsKnown();
    }
    ContextPartialTranslation.prototype.handleWordIsSetAsKnown = function () {
        var _this = this;
        waitAndRun('app.wordIsSetAsKnown', function () {
            app.wordIsSetAsKnown.subscribe(function (term) {
                console.log(term);
                _this.removeWordFromNewWordsList(_this.originalData, term);
                _this.setData(_this.originalData);
            });
        });
    };
    ContextPartialTranslation.prototype.removeWordFromNewWordsList = function (object, term) {
        var _this = this;
        if (!object) {
            return;
        }
        if (typeof object !== "object") {
            return;
        }
        for (property in object) {
            if (property === "newWords") {
                object[property] = object[property].filter(function (item) { return item['term'].toLowerCase() !== term.toLowerCase() });
            }
            else {
                _this.removeWordFromNewWordsList(object[property], term);
            }
        }
    };
    ContextPartialTranslation.prototype.loadEntity = function (entityGuid, previousEntityGuid) {
        var _this = this;
        // loading data from API, then calling setData using JSON returned from API
    };
    ContextPartialTranslation.prototype.setData = function (data) {
        var _this = this;
        _this.readingStats = null;
        _this.content = null;
        _this.entity = null;
        _this.readingStats = data.readingStats;
        _this.content = data;
        _this.entity = data.entity;
        console.log('new enttiy', _this.entity);
    };
    ContextPartialTranslation = __decorate([
        ng.core.Component({
            selector: 'contextPartialTranslation',
            templateUrl: '/context/partialTranslationHtml',
            preserveWhitespaces: true 
        }),
        __metadata("design:paramtypes", [])
    ], ContextPartialTranslation);
    ContextPartialTranslation.parameters = [];
    return ContextPartialTranslation;
}());

var OriginalText = (function () {
    function OriginalText() {
        var _this = this;
    }
    OriginalText.prototype.ngOnChanges = function (changes) {
        var _this = this;
        console.log(changes);
        _this.html = app.sanitizer.bypassSecurityTrustHtml(_this.addStyleToNewWordsInsideText(_this.html, _this.newWords));
    };
    OriginalText.prototype.addStyleToNewWordsInsideText = function (text, newWords) {
        if (!text) {
            text = '';
        }
        if (!newWords) {
            newWords = [];
        }
        tempNewWords = newWords.map(function (i) { return i.term; });
        var allWords = [];
        var regex = /\b[a-zA-Z]{2,}\b/gi;
        var match = true;
        while (match) {
            match = regex.exec(text);
            if (match && tempNewWords.indexOf(match.toString()) === -1) {
                allWords.push(match.toString());
            }
        }
        tempNewWords = tempNewWords.filter(function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
        });
        allWords = allWords.filter(function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
        });
        for (var x = 0; x < allWords.length; x++) {
            text = text.replace(new RegExp('\\b' + allWords[x] + '\\b', 'gi'), function (newWord) {
                return '<span class="word" onclick="app.showWordDialog(\'' + newWord + '\')">' + newWord + '</span>';
            });
        }
        for (var y = 0; y < tempNewWords.length; y++) {
            text = text.replace(new RegExp('\\b' + tempNewWords[y] + '\\b', 'gi'), function (newWord) {
                return '<span class="newWord">' + newWord + '</span>';
            });
        }
        return text;
    };
    __decorate([
            ng.core.Input(),
            __metadata("design:type", String)
        ], OriginalText.prototype, 'html', void 0);
    __decorate([
            ng.core.Input(),
            __metadata("design:type", String)
        ], OriginalText.prototype, 'newWords', void 0);
    OriginalText = __decorate([
        ng.core.Component({
            selector: 'originalText',
            templateUrl: '/language/originalText',
            preserveWhitespaces: true 
        }),
        __metadata("design:paramtypes", [])
    ], OriginalText);
    OriginalText.parameters = [];
    return OriginalText;
}());

var OriginalText=（函数（）{
函数OriginalText（）{
var_this=这个；
}
OriginalText.prototype.ngOnChanges=函数（更改）{
var_this=这个；
控制台日志（更改）；
_this.html=app.sanitizer.bypassSecurityTrustHtml（_this.addStyleToNewWordsInsideText（_this.html，_this.newWords））；
};
OriginalText.prototype.AddStyleTonewOrdsinsideText=函数（文本、新词）{
如果（！text）{
文本=''；
}
如果（！新词）{
新词=[]；
}
tempNewWords=newWords.map（函数（i）{returni.term；}）；
var-allWords=[]；
var regex=/\b[a-zA-Z]{2，}\b/gi；
var匹配=真；
while（比赛）{
match=regex.exec（文本）；
if（match&&tempNewWords.indexOf（match.toString（））=-1）{
allWords.push（match.toString（））；
}
}
tempNewWords=tempNewWords.filter（函数onlyUnique（值、索引、self）{
返回self.indexOf（value）==索引；
});
allWords=allWords.filter（函数onlyUnique（值、索引、自身）{
返回self.indexOf（value）==索引；
});
for（var x=0；x

这就是我在父组件中使用子组件的方式：

<mat-card class="center marginTop title-container main-title">
    <mat-card-header *ngIf="entity?.title">
        <mat-card-title>
            <div [ngStyle]="{ 'background-image': 'url(' + entity.relatedItems.photos[0].relatedItems.url + ')'}" id="partialTranslation_Background" class="background"></div>
            <p class="title">
                <originalText [html]="entity.title" [newWords]="entity.relatedItems.newWords"></originalText>
            </p>
            <newWords [list]="entity.relatedItems.newWords" style="position: relative; z-index: 1;"></newWords>
        </mat-card-title>
        <mat-card-subtitle class="align-center" style="margin-top: 8px;">Cooking Time: {{ entity?.cookingTimeInMinutes }} Minutes ● Calories: {{ entity?.calories }}</mat-card-subtitle>
    </mat-card-header>
</mat-card>

<mat-card class="center marginTop image-container">
    <div class="background" [ngStyle]="{ 'background-image': 'url(' + entity.relatedItems.photos[0].relatedItems.url + ')'}"></div>
    <img src="{{ entity.relatedItems.photos[0].relatedItems.url }}" />
</mat-card>

烹饪时间：{{entity？.cookingTimeInMinutes}}分钟● 卡路里：{{实体？.carries}

最重要的部分是：

• 父组件中的设置数据

• ngOnChange

  在子组件中

---

>代码>你能给出更新两个参数的代码段吗？你的组件的完整代码和项目数组的例子可以考虑在<代码> *NGO< <代码>中使用<代码> TrcBube <代码>，并提供你自己的函数来帮助更好地检测变化。因为我们有不同的角度转换器（不使用CLI和使用UMD）。因此，代码不像正常的角度。这会有帮助吗？请向我们展示子组件中的

@Input

绑定，以及子模板/代码中显示或记录这些值到控制台的部分。您也可以显示您分配给这些属性的典型值。您可以给出更新两个参数的代码段吗？也可以使用您的组件的完整代码和项目数组的示例，在<代码> *ngOb/<代码>中使用<代码>跟踪代码< /C> >，并提供您自己的函数来帮助更好地检测更改。因为我们有不同的转发器。对于Angular（不使用CLI和UMD），代码与普通Angular不同。这会有帮助吗？请向我们展示子组件中的

@Input

绑定，以及子模板/代码中显示或记录这些值到控制台的部分。还可以显示指定给这些特性的典型值。